如何在 React 中使用条件进行渲染答案

【问题标题】：How to render with conditions in React如何在 React 中使用条件进行渲染
【发布时间】：2020-09-20 22:15:38
【问题描述】：

拥有这种经典的渲染方法：

render() {
  ...
  return (
    <div> ... </div>
  );
}

我的问题是如何根据条件返回不同的东西？

例如，在我的例子中，它是一个状态值：this.state.value - 如果这个值是 true - 返回一些东西，如果它是 false - 返回一些东西。

我尝试了几种方法，但没有找到可行的解决方案。

三元内部返回：

render() {
  ...
  return (
    {this.state.value ? 
       <div> something </div>
     : <div> something else </div>
    }
  );
}

这个说：解析错误：意外的关键字'this'

如果-否则

render() {
  ...
  return (
    {
      if(this.state.value) { 
       <div> something </div> 
      } else {
        <div> something else </div>
      }
    }
  );
}

它与上面的错误相同。

当我尝试用return ( ... ); 为 if 和 else 做一个 if-else 语句时，它说：在 'return' no-else-return 之后不必要的 'else'

它如何根据this.state.value的值返回不同的东西？

【问题讨论】：

你需要if (this.state.value) return (<div>...</div>); else return (<div>...</div>); 或return (<>{this.state.value ? <div>...</div> : <div>...</div>}</>); 或简单的return (this.state.value ? <div>...</div> : <div>...</div>); 用花括号包裹表达式只能在JSX内部完成。

标签： javascript reactjs

【解决方案1】：

您不需要在{} 中包含三元条件，以下将起作用

render() {
  ...
  return this.state.value ? 
       <div> something </div>
     : <div> something else </div>
  );
}

【讨论】：

【解决方案2】：

return this.state.value
 ? <div> something </div>
 : <div> something else </div>;

或

if (this.state.value) { 
  return <div> something </div>;
} else {
  return <div> something else </div>;
}

在第一种情况下，您在返回值周围有额外的 {}，在第二种情况下，return if 在 JS 中是不可能的，因为if 不返回任何内容。

将 JSX 标记视为函数调用（它们实际上被转换为对 React.createElement 的调用）。

【讨论】：