Question

我仍然是React的新手，如果道具返回true，我很难弄清楚如何显示div元素内容。我知道我只能在一个函数中返回一个渲染，但我怎么能实现这一点。我可以写一些类型Jsx内联if语句吗？

<div>if true show</div> 
<div>if true show</div> 
<div>false don't show</div> 
<div>if true show</div>

更新：我实际上使用了

{this.props.test === true &&
    <div>if true show</div>
  }

Answer 1

您可以通过以下两种方式实现目标：

1）它有点冗长，但它允许在较小的聚焦块中轻松分割逻辑。

maybeRenderPerson: function() {
    var personName = ...;
    if ( personName ) {
        return <div className="person">{personName}</div>;
    }
}

render: function() {
    return (
       <div className="component">
          {this.maybeRenderPerson()}
       </div>
    );
}

2）如果测试变量可能是虚假值，如0，“”或false，则此语法可能非常危险。特别是对于数字，如果要确保它呈现为0，则应该稍微修改测试。

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
        <div className="component">
          {person && (
            <Person person={person}/>
         )}
         {(typeof counter !== 'undefined') && (
             <Counter value={counter}/>
         )}
       </div>
    );
}

Matt建议的屁股，您可以找到有关条件渲染here的更多信息。

Answer 2

如果您正在寻找简洁的东西，虽然不一定更具可读性，但您可以使用三元运算符。

{this.props.test ? <div>if true show</div> : ''}

Answer 3

现在的简单用例。

{this.props.test === true &&
    <div>if true show</div>
  }

Answer 4

这里是新开发者的新实例

const [ role, setRole ] = useState('');

const onClick = () => setRole('admin');

<input type='button' onClick={onClick} value='i am admin' />

   {role == 'admin' &&
    <div className='admin'>{'this section view using react... '}
      </div>    
  }

React显示这些div如果是真的

4 个答案: