React中如何在JSX变量中传递布尔参数？

你的问题出在call方法的使用上：call的第一个参数是用来指定函数内部this的指向，不是传递给函数的参数。所以你写的links.call(false)相当于把this设为false，而condition参数根本没传，自然是undefined。

方法一：直接调用函数传参（最简单） #

不需要用call，直接像普通函数一样传参数就行：

function links(condition){
   console.log("Condition is: " + condition);
   return(<h1 className={`mr-10  ${ condition ? 'flex' : 'hidden' }`}>Test</h1>);
}

const Navbar = () => { 
   return( <nav>
       <div> {links(false)} </div> 
       <div> {links(true)} </div>
   </nav> 
); }

方法二：写成React函数组件（更符合React规范） #

既然是返回JSX的片段，更推荐写成标准的React组件，通过props传递参数：

// 首字母大写，符合React组件命名规范
const Links = ({ condition }) => {
   console.log("Condition is: " + condition);
   return(<h1 className={`mr-10 ${ condition ? 'flex' : 'hidden' }`}>Test</h1>);
}

const Navbar = () => { 
   return( <nav>
       <div> <Links condition={false} /> </div> 
       <div> <Links condition={true} /> </div>
   </nav> 
); }

这样不仅更符合React的开发习惯，后续如果需要扩展更多属性也更方便。

内容的提问来源于stack exchange，提问作者Turgut