React - 在父div中包装变量组件?

时间:2018-03-24 15:18:33

标签: javascript

我有一个呈现部分的页面,以及每个部分的呈现方式取决于它是什么类型的部分。例如,如果该部分是textWithImage,则返回:

case 'textWithImage':
    return (
      <div>
        <div>{this.props.section.text}</div>
        <img src={this.props.section.imageURL} />
      </div>
    )

我还有一个setOfThree的部分,其中有3个元素,如父部分中的textWithImage,setOfThree。这是我目前的代码:

case 'setOfThree':
      return (
        this.props.section.elements.map((element) => {
          switch (element.type) {
            case 'picture':
              return <img key={element.id} src={element.imageURL} />
            case 'headline':
              return (
                <div key={element.id}>
                  <h2>{element.headline}</h2>
                  <div>{element.description}</div>
                </div>
              )
            case 'blobWithHeadline':
              return (
                <div key={element.id}>
                  <h2>{element.headline}</h2>
                  <div>{element.blob}</div>
                </div>
              )
            case 'imageWithDescription':
              return (
                <div>
                  <div key={element.id}>{element.text}</div>
                  <img src={element.imageURL} />
                </div>
              )
          }
        })
      )
  default:
    return (
      <div>testing</div>
    )
}
}

我想第三部分有一个包含所有子元素的父div,所以我可以在sectionOfThree上使用flexbox。如何将所有子元素包装在父div中?

1 个答案:

答案 0 :(得分:0)

如果我理解你的问题,我认为你可以像下面这样包装:

let subElements = [];
switch( ... ) {
     // ...
   case 'textWithImage':
       return(<div>
           <div>{this.props.section.text}</div>
           <img src={this.props.section.imageURL} />
       </div>));
       break;

   case 'setOfThree':
       return (<div className = "parent">
           {this.props.section.elements.map((element) => {
               switch (element.type) {
                   case 'picture':
                       return (<img key={element.id} src={element.imageURL} />);
                   case 'headline':  
                       return(
                           <div key={element.id}>
                               <h2>{element.headline}</h2>
                               <div>{element.description}</div>
                       </div>);
                       break;
                   case 'blobWithHeadline':
                       retrun(
                           <div key={element.id}>
                               <h2>{element.headline}</h2>
                               <div>{element.blob}</div>
                       </div>);
                       break;
                   case 'imageWithDescription':
                       retrun (
                           <div>
                               <div key={element.id}>{element.text}</div>
                               <img src={element.imageURL} />
                       </div>);
                       break;
               }
           })}</div>);
     //...
   default:
       break;
 }