在 React + Typescript 中使用调用组件时，if 条件的正确语法是什么？

Question

我目前正在尝试显示一个组件并仅在其状态属性之一为真时将函数作为道具传递。但是，我遇到了语法问题。这是我所拥有的：

render = () => {
return (
  <ParentComponent>

       {if (this.onlyRenderIfTrue) {
          <ChildComponent prop1={this.usefulFunction()}/>
       }}

  </ParentComponent>
);

}

JSX 让我有点困惑。我知道每当我必须使用 Javascript 时，我都必须将它放在 {} 中，但是对于像这样更嵌套的东西，它让我有点失望。

Answer 1

你不能直接在 React 渲染钩子中编写条件语句。但是，您可以使用 && 运算符或 ternary 运算符：

render = () => {
  return (
   <ParentComponent>
   {
      this.onlyRenderIfTrue &&
      <ChildComponent prop1={this.usefulFunction()}/>
   }
   </ParentComponent>
  );
}

如果你想使用条件语句，那么你可以定义如下函数：

const renderComponent = () => {
  if (somethingIsTrue) {
   return <h1>True</h1>
  } else {
   return <p>False</p>
  }
}

现在，在您的组件渲染中，您可以调用：

{renderComponent()}