Question

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

UserControl

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

例如，在我的情况下，它是状态上的一个值：render() { ... return ( <div> ... </div> ); }-如果该值为true-返回值，如果为false-返回其他值。

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

三元组内部回报：

this.state.value

此人说：分析错误：意外的关键字“ this”

如果不是

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

它具有与上述相同的错误。

当我尝试使用render() { ... return ( { if(this.state.value) { <div> something </div> } else { <div> something else </div> } } ); }对if和else进行if-else语句时，它说：在'return'之后不进行不必要的'else'，否则将返回 < / p>

如何根据return ( ... );的值返回不同的内容？

Answer 1

您无需在{}内包含三元条件

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

Answer 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>;
}

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

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

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

2 个答案: