Question

我有一个呈现部分的页面，以及每个部分的呈现方式取决于它是什么类型的部分。例如，如果该部分是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中？

Answer 1

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

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;
 }

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

1 个答案: