Question

我有一个react组件，我需要根据数组中的项目渲染一堆元素。我已经设置了一个函数来渲染数组中的所有数组，并且效果很好。现在，我想将渲染的元素分为两个不同的包装器元素。我尝试了几种使用if语句和开关执行此操作的方法，但是我的代码变得非常混乱。我想看看是否有更清洁的方法可以做到，有人可能会知道。

  renderSplit(key) {
    return <div className={`inner_${key}`} key={key}>{`inner_${key}`}</div>;
  }

  render() {
    const { arr } = this.props;
    return (
      <div>
        {arr.map(this.renderSplit)}
      </div>
    );
  }

因此，如果我有5个项目的数组，我希望将renderSplit渲染的前4个项目包装在一个容器中 <div className='left'>.....</div>和要包装在另一个包装器<div className='right'>....</div>中的数组中的最后一项如果只有一项，则在数组中不会被任何包装div包装。

Answer 1

应该是arr.map而不是body.map接下来传入数组。然后调用函数

执行此操作：

 renderSplit(arr) {
    return arr.map((entry,index)=>
             <div className={`inner_${entry}`} key={entry}>{`inner_${entry}`}</div>;
         )
      }

  render() {
    const { arr } = this.props;
    return (
      <div>
        {this.renderSplit(arr)}
      </div>
    );
  }

您可以在map语句中输入一个条件（相对于索引），以满足最后一个语句

Answer 2

您可以使用destructuring assignment从数组中提取第一个元素和最后一个元素，检查是否存在最后一个元素（如果不存在），这意味着该数组只有一个条目，并相应地呈现：

 renderSplit(key) {
    return <div className={`inner_${key}`} key={key}>{`inner_${key}`}</div>;
  }

  render() {
    const { arr } = this.props;
    const [last, ...firstElems ] = arr.reverse(); // reverse the array to get the last element and use the spread operator to get the rest.

    return (
      firstElems.length > 0  // if you have elements in the firstElems array 
        ? ( 
        <div className="wrapper">
          <div className="left">{firstElems.reverse().map(this.renderSplit)}</div> // reverse the firstElems array to display it in the right order.
          <div className="right">{this.renderSplit(last)}</div> // render the last element.
        </div> 
        )
        // other wise, render the single element you have.
        : <div className="singleElement">{this.renderSplit(last)}</div> 
    );
  }

Answer 3

让我们看看：

  renderSplit(key) {
    return <div className={`inner_${key}`} key={key}>{`inner_${key}`}</div>;
  }

  render() {
    const { arr } = this.props;

    if(!arr || !arr.length) { return null; }

    if(arr.length === 1) { return renderSplit(arr[0]); }

    const left = arr.slice(0, arr.length - 2);
    const right = arr[arr.length -1];
    // Or else: 
    // const rightElement = arr.pop(); const leftElements = arr;

    return (
      // or <React.Fragment>
      <>
        <div className="left">
          {leftElements.map(this.renderSplit)}
        </div>
        <div className="right">
          {this.renderSplit(rightElement)}
        </div>
      </>       
    );
  }

在React中使用map函数的包装器渲染元素

3 个答案: