在React中使用for循环和切换案例来动态呈现不同的组件

我试图在React JSX中使用switch case有条件地渲染组件。我正在尝试构建从特定json结构读取并呈现数据的内容。由于可以有许多不同的组件和数据，我试图动态呈现它。请参阅下面的代码，我没有收到任何错误，但组件没有得到渲染。在我的HTML中，我只能看到。这意味着循环不起作用。我尝试在vanilla JS中使用相同的循环，它的工作原理。

var myPackage = [{
    sectionInfo:[{
        elementType: 1,text: "This is text from element type 1"
    }]
},{
    sectionInfo:[{
        elementType: 2,text: "This is text from element type 2"
    }]
}];
var App = React.createClass({
 
    render: function(){
        var elements = [];
        elements = myPackage.map(function(myObj){
            myObj.sectionInfo.map(function(myObj1){
                switch(myObj1.elementType){
                    case 1: return(
                                <Component1 text = {myObj1.text}/>
                            );
                            break;
                    case 2: return(
                                <Component2 text = {myObj1.text}/>
                            )
                            break;      
                }
            })
        });
        return(
            <div className="App">
                {elements}
            </div>
        )
    }
});
var Component1 = React.createClass({
    render:function(){
        return(
            <div className = "element1">
                {this.props.text}
            </div>
        )
    }
});
var Component2 = React.createClass({
    render:function(){
        return(
            <div className = "element2">
                {this.props.text}
            </div>
        )
    }
});
ReactDOM.render(<App/>,document.getElementById('container'));

编辑：对代码添加了一些内容，现在我遇到了一个新问题。这是新代码：

var App = React.createClass({
 
        render: function(){
            var elements = [];
            elements = myPackage.map(function(myObj){
                return(
                       <div>
                           myObj.sectionInfo.map(function(myObj1){
                           switch(myObj1.elementType){
                           case 1: return(
                                    <Component1 text = {myObj1.text}/>
                                );
                                break;
                           case 2: return(
                                    <Component2 text = {myObj1.text}/>
                                )
                                break;      
                        }
                        }
                  </div>
                )
                });
        return(
            <div className="App">
                {elements}
            </div>
        )
    }
});

我希望每次都在div中渲染。因此，如果一个部分有超过3个元素，则所有3个必须在div内。

您应该从第一个.map返回值，在您的情况下，它是来自内部.map的结果

var elements = myPackage.map(function(myObj){
  return myObj.sectionInfo.map(function(myObj1) {
     // ...  
  });
});

更新：

根据您的新更新，您可以像这样更改代码

var App = React.createClass({
 
  section: function(myObj,parentIndex) {
    return myObj.sectionInfo.map(function(myObj1,index) {
      const key = parentIndex + '.' + index;
 
      switch(myObj1.elementType) {
        case 1:
          return <Component1 text = {myObj1.text} key={ key } />
        case 2:
          return <Component2 text = {myObj1.text} key={ key } />
      }
    });
  },render: function() {
    var elements = myPackage.map(function(myObj) {
      return <div>
        { this.section(myObj,index) }
      </div>
    },this);
 
    return <div className="App">
     { elements }
    </div>;
  }
});

在React中使用for循环和切换案例来动态呈现不同的组件

猜你在找的React相关文章