在 React 中使用 for 循环和 switch case 来动态渲染不同的组件 [英] Using for loops and switch cases in React to dynamically render different components

问题描述

我正在尝试使用 React JSX 中的 switch case 有条件地渲染组件.我正在尝试构建从特定 json 结构读取并呈现数据的东西.由于可能有许多不同的组件和数据，我试图动态呈现它.请参阅下面的代码，我没有收到任何错误，但组件没有被渲染.在我的 html 里面，我只能看到 .这意味着循环不起作用.我尝试在 vanilla JS 中使用相同的循环并且它有效.

var myPackage = [{部分信息:[{元素类型:1，text: "这是来自元素类型 1 的文本"}]},{部分信息:[{元素类型:2，text: "这是来自元素类型 2 的文本"}]}];var App = React.createClass({渲染:函数(){变量元素 = [];元素 = myPackage.map(函数(myObj){myObj.sectionInfo.map(函数(myObj1){开关(myObj1.elementType){案例1:返回(<Component1 文本 = {myObj1.text}/>);休息;案例2:返回(<Component2 文本 = {myObj1.text}/>)休息;}})});返回(<div className="App">{元素}</div>)}});var Component1 = React.createClass({渲染:函数(){返回(<div className = "element1">{this.props.text}</div>)}});var Component2 = React.createClass({渲染:函数(){返回(<div className = "element2">{this.props.text}</div>)}});ReactDOM.render(<App/>,document.getElementById('container'));

对代码做了一些补充，现在我面临一个新问题.这是新代码:

var App = React.createClass({渲染:函数(){变量元素 = [];元素 = myPackage.map(函数(myObj){返回(
myObj.sectionInfo.map(函数(myObj1){开关(myObj1.elementType){案例1:返回(<Component1 文本 = {myObj1.text}/>);休息;案例2:返回(<Component2 文本 = {myObj1.text}/>)休息;}}</div>)});返回(<div className="App">{元素}</div>)}});

我想每次都在 div 中渲染.所以如果一个部分有超过 3 个元素，那么所有 3 个元素都必须在一个 div 内.

解决方案

您应该从第一个 .map 返回值，在您的情况下，它是内部 .map 的结果

var 元素 = myPackage.map(function(myObj){返回 myObj.sectionInfo.map(function(myObj1) {//...});});

更新:

根据您的新更新，您可以像这样更改您的代码

var App = React.createClass({部分:函数(myObj，parentIndex){返回 myObj.sectionInfo.map(function(myObj1, index) {const key = parentIndex + '.'+索引；开关(myObj1.elementType){情况1:return <Component1 text = {myObj1.text} key={ key }/>案例2:return <Component2 text = {myObj1.text} key={ key }/>}});},渲染:函数(){var 元素 = myPackage.map(function(myObj) {返回 
{ this.section(myObj, index) }</div>}， 这);返回 <div className="App">{元素}</div>;}});

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'));

Edit: 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>
        )
    }
});

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.

解决方案

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) {
     // ...  
  });
});

Update:

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 循环和 switch case 来动态渲染不同的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！