Question

我有一个有条件渲染的反应成分，即：

 render() {
        if (this.state.isFoo) {
            return (
               <div className='bar'>
                   <Baz />
               </div>
            );
        } else {
           return (
            <div>
              <TextField /> <Button>search</Button>
           </div>
           );
        }
 }

<Baz /> dropdown来自getmdl-select render。如果我在不检查isFoo是否为真的情况下包含getmdl-select.min.js的第一部分，则会正确呈现下拉列表。通过正确的意思，用户可以选择一个选项。但是使用条件渲染，如示例所示，选项不可选。下拉列表不会扩展，选项也不可见。是因为search在加载时做了什么吗？

注意：isFoo按钮激活var el = document.getElementById("myEl"); var group = el.closest(".form-group"); var ipt = el.closest(".form-group > input"); var lbl = el.closest(".form-group > label"); console.log(ipt); console.log(lbl);，即将其设置为true，以便请求重新呈现。

Answer 1

渲染必须返回要渲染的React元素。您错过了其他部分的退货，而且您的按钮未正确关闭。这是条件if else渲染的一个例子。

render() {
        return (
          this.state.isFoo
            ?  
             <div className='bar'>
               <Baz />
             </div>
            :
             <div>
               <TextField /> <Button>search</Button>
             </div>
        );
 }

Answer 2

以下是我编码的方法。

render() {
    if (this.state.isFoo) {
        return (
           <div className='bar'>
               <Baz />
           </div>
        );
   return (
        <div>
          <TextField /> <Button>search</>
       </div>
    );
}

使用装载程序时，我经常使用这种方法

反应：条件渲染

2 个答案: