在React中使用for循环和切换案例来动态渲染不同的组件 [英] Using for loops and switch cases in React to dynamically render different components
问题描述
我正在尝试使用React JSX中的switch case有条件地渲染组件.我正在尝试构建从特定json结构读取并呈现数据的内容.由于可以有许多不同的组件和数据,因此我尝试动态呈现它.请参阅下面的代码,我没有收到任何错误,但是组件没有得到渲染.在我的html中,我只能看到.这意味着循环无法正常工作.我尝试在香草JS中使用相同的循环,并且可以正常工作.
I am trying to render components conditionally using switch case in React JSX. I am trying to build something that reads from a specific json structure and renders the data. Since there can be many different components and data, I am trying to render it dynamically. See my code below, I am not getting any errors but the components aren't getting rendered. Inside my html , I can only see . This means the loop isn't working. I tried using the same loop in vanilla JS and it works.
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'));
在代码中做了一些补充,现在我面临一个新问题.这是新代码:
Made a few additions to the code, and now I am facing a new problem. Here is the new code:
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内.
I want to render each time inside a div. So that if one section has more than 3 elements, then all 3 must be inside a div.
推荐答案
您应该从第一个.map
返回值,如果是内部.map
You should return value from first .map
, in your case it is result from inner .map
var elements = myPackage.map(function(myObj){
return myObj.sectionInfo.map(function(myObj1) {
// ...
});
});
更新:
根据您的新更新,您可以像这样更改代码
Based on your new update, you can change your code like this
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循环和切换案例来动态渲染不同的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!