我试图在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>;
}
});
