在我们的 react.js jsx 代码中呈现条件

Question

哪种做法更好？？

{someBoolean ? <showMe/> : null }

或

{someBoolean && (<showMe/>)}

到底有没有关系？什么是优点和缺点？我们需要调用 null 吗？一个人对另一个人会导致问题吗？无论如何，不同的语法在做什么？

Answer 1

就我而言，我更喜欢使用这个 {someBoolean && ()} 而不是 {someBoolean ? ：无效的 }。这个答案是基于我的喜好。优点：你永远不需要在最后考虑 ':null' else 语句，如果你有很多类型的 someBoolean 例如你有那个组件的默认道具，你的报告表单会有很多你需要的 someBooleantypes到同时考虑。

如

<ParentComponent />
  <ChildComponent someBoolean={true}/>
</ParentComponent>

<ParentComponent />
  <ChildComponent someBooleanv2={true}/>
</ParentComponent>

ChildComopnent.jsx
const ChildComponent =({someBoolean,someBooleanv2})=>{
  return (<div>
    {someBoolean && !someBooleanv2 (<showMe/>)}
    {someBooleanv2 && !someBoolean  (<showMeV2/>)}
  <div/>);
}

大多数时候，如果我想加班使用它以提高 formik 功能的效率，我会在单个 ReportsForm 上使用它

在我们的 react.js jsx 代码中呈现条件

Rendering conditionals in our code for react.js jsx

jsx

reactjs