在React中使用for循环和switch case来动态呈现不同的组件
在React中使用for循环和switch case来动态呈现不同的组件
提问于 2016-06-13 14:05:29
我正在尝试在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中。
回答 4
Stack Overflow用户
发布于 2017-02-24 20:33:20
要在JSX中执行切换用例，请执行以下操作：
{{
sectionA: (
<SectionAComponent />
),
sectionB: (
<SectionBComponent />
),
sectionC: (
<SectionCComponent />
),
default: (
<SectionDefaultComponent />
)
}[section]}Stack Overflow用户
发布于 2016-11-02 15:52:06
对于内联/未创建的新函数，您可以使用此方法
<div>
{(() => {
switch (myObj1.elementType) {
case 'pantulan':
return <Component1 text = {myObj1.text} key={ key } />
default :
null
}
})()}
</div>Stack Overflow用户
发布于 2018-03-14 15:39:02
React推荐的方式：React Docs
const components = {
photo: PhotoStory,
video: VideoStory
};
function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37782776
复制相关文章
相似问题