loops - 在React中使用for循环和switch case来动态渲染不同的组件

Question

我正在尝试使用 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 内。

Answer 1

要在 JSX 中执行 switch case，请执行以下操作:

   {{
    sectionA: (
      <SectionAComponent />
    ),
    sectionB: (
      <SectionBComponent />
    ),
    sectionC: (
      <SectionCComponent />
    ),
    default: (
      <SectionDefaultComponent />
    )
  }[section]}