我正在尝试使用React JSX中的switch case有条件地渲染组件。我正在尝试构建从特定json结构读取并呈现数据的内容。由于可以有许多不同的组件和数据,因此我尝试动态呈现它。请参阅下面的代码,我没有收到任何错误,但是组件没有得到渲染。在我的html中,我只能看到。这意味着循环不起作用。我尝试在香草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内。
您应该从first返回值.map,在这种情况下,它是内部的结果.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>; } });