Использование для циклов и переключателей в React для динамического рендеринга различных компонентов

Я пытаюсь сделать компоненты условно, используя случай переключения в React JSX. Я пытаюсь создать что-то, что читается из конкретной 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.

Ответ 1

Вы должны вернуть значение с первого .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>;
  }
});

Ответ 2

Чтобы сделать случай переключения в JSX, выполните следующие действия:

   {{
    sectionA: (
      <SectionAComponent />
    ),
    sectionB: (
      <SectionBComponent />
    ),
    sectionC: (
      <SectionCComponent />
    )
  }[section]}

Ответ 3

для встроенной/не созданной новой функции, вы можете использовать этот способ

<div>
    {(() => {
        switch (myObj1.elementType) {
            case 'pantulan':
                return <Component1 text = {myObj1.text} key={ key } />
            default :
                null
        }
    })()}
</div>

Ответ 4

Вам не хватает возврата, как указано в ответе Alexander T, но я также рекомендовал бы добавить ключ к каждому из ваших элементов. Реакция зависит от этого значения для этого алгоритма, вы можете сделать что-то вроде:

render: function(){
  var elements = myPackage.map(function(myObj, pIndex){
    return myObj.sectionInfo.map(function(myObj1, sIndex){
      var key = pIndex + '.' + sIndex;            
      switch(myObj1.elementType) {
        case 1: return(
          <Component1 key={key} text={myObj1.text}/>
        );
        case 2: return(
          <Component2 key={key} text={myObj1.text}/>
        )
      }
    })
  });
  return(
    <div className="App">
      {elements}
    </div>
  )
}

Читайте здесь для получения дополнительной информации: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children