Question

我试图在输入中获得的状态的帮助下加载两个或三个组件。我知道如何在render函数中使用三元运算符。它就像这样

render: function(){
 return( <div>
         {this.state.in===2?<Two/>: <Three/>}
         </div>
          )}

但这只适用于两个比较，如果我有十个组件，并希望在10个不同的选择上加载10个不同的组件。我已经去了。这是我的尝试。我无法保持 {} 中的条件，就像我使用三元运算符一样，如果我不将它们保留在 {} 中，则渲染正在加载它正常文本。这是我的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">

     var One = React.createClass({

      getInitialState: function(){
        return {in:2}
      },

      handler: function(eve){

        this.setState({
           in: eve.target.value
        })
      },

      render: function(){
        return(
          <div>
          <input value={this.state.in} onChange={this.handler} />
           if(this.state.in ===2){
              <Two/>
            }
            if(this.state.in ===3){
              <Three />
            }

          </div>
          ) 

      }

     }); 


     var Two = React.createClass({

      render: function(){
        return(<div>
            This is component 2
          </div>)

      }

     });

     var Three = React.createClass({

        render: function(){
          return(<div>This is the third one</div>)

        }


     })


      React.render(<One/>,document.getElementById('example'));

    </script>
  </body>
</html>

ps：有关进一步阅读和官方文档，请查看此http://facebook.github.io/react/tips/if-else-in-JSX.html

Answer 1

React可以处理一组节点。所以，尝试创建一个数组：

let children = [];

if (cond1) children.push(elem1);
if (cond2) children.push(elem2);
if (cond3) children.push(elem3);

return <div>{children}</div>;

Answer 2

也许是这样的：

render: function(){
        //Get all your component names and create an array
        var components = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];

        return(
          <div>
              <input value={this.state.in} onChange={this.handler} />
              < components[this.state.in - 1] />
            </div>
          );

      }

});

如何在渲染函数

2 个答案: