Javascript 使用react中映射函数的包装器渲染元素

我有一个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>
    );
  } 

renderSplit（关键点）{
返回{`inner{${key}`}；
}
render（）{
const{arr}=this.props；
返回(
{arr.map（this.renderSplit）}
);
} 

因此，如果我有一个由5项组成的数组，我希望由renderSplit渲染的前4项被包装在一个容器中

…

和数组中最后一个要包装在另一个包装中的项

…

---

如果数组中只有一个项，则它不会被任何包装器div包装。

它应该是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>
    );
  } 

renderSplit（arr）{
返回arr.map（（条目，索引）=>
{`internal{${entry}`}；
)
}
render（）{
const{arr}=this.props；
返回(
{this.renderSplit（arr）}
);
} 

---

您可以在map语句中输入一个条件（关于索引），以满足最后一条语句的要求，它应该是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>
    );
  } 

renderSplit（arr）{
返回arr.map（（条目，索引）=>
{`internal{${entry}`}；
)
}
render（）{
const{arr}=this.props；
返回(
{this.renderSplit（arr）}
);
} 

您可以在map语句中输入一个条件（关于索引），以满足最后一个语句的要求，您可以使用该语句从数组中提取第一个元素和最后一个元素，检查最后一个元素是否存在，如果不存在，则表示数组只有一个条目，并相应地进行渲染：

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

renderSplit（关键点）{
返回{`inner{${key}`}；
}
render（）{
const{arr}=this.props；
const[last，…firstElems]=arr.reverse（）；//反转数组以获取最后一个元素，并使用扩展运算符获取其余元素。
返回(
firstElems.length>0//如果firstElems数组中有元素
? ( 
{firstElems.reverse（）.map（this.renderSplit）}//反转firstElems数组以按正确顺序显示它。
{this.renderSplit（last）}//呈现最后一个元素。
)
//另一方面，渲染您拥有的单个元素。
：{this.renderSplit（last）}
);
} 

您可以使用从数组中提取第一个元素和最后一个元素，检查最后一个元素是否存在，如果不存在，则表示数组只有一个条目，并相应地渲染：

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

renderSplit（关键点）{
返回{`inner{${key}`}；
}
render（）{
const{arr}=this.props；
const[last，…firstElems]=arr.reverse（）；//反转数组以获取最后一个元素，并使用扩展运算符获取其余元素。
返回(
firstElems.length>0//如果firstElems数组中有元素
? ( 
{firstElems.reverse（）.map（this.renderSplit）}//反转firstElems数组以按正确顺序显示它。
{this.renderSplit（last）}//呈现最后一个元素。
)
//另一方面，渲染您拥有的单个元素。
：{this.renderSplit（last）}
);
} 

让我们看看：

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

renderSplit（关键点）{
返回{`inner{${key}`}；
}
render（）{
const{arr}=this.props；
如果（！arr | |！arr.length）{返回null；}
如果（arr.length==1）{return renderSplit（arr[0]）；}
const left=arr.slice（0，arr.length-2）；
const right=arr[arr.length-1]；
//否则：
//常量rightElement=arr.pop（）；常量leftElements=arr；
返回(
//或
{leftElements.map（this.renderSplit）}
{this.renderSplit（rightElement）}
);
} 

让我们看看：

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

renderSplit（关键点）{
返回{`inner{${key}`}；
}
render（）{
const{arr}=this.props；
如果（！arr | |！arr.length）{返回null；}
如果（arr.length==1）{return renderSplit（arr[0]）；}
const left=arr.slice（0，arr.length-2）；
const right=arr[arr.length-1]；
//否则：
//常量rightElement=arr.pop（）；常量leftElements=arr；
返回(
//或
{leftElements.map（this.renderSplit）}
{this.renderSplit（rightElement）}
);
} 

谢谢Meligy，[…leftElements，rightElement]是从哪里获取这些变量的？当我尝试上面的解构时，会收到一条eslint警告。分析错误时出错：意外标记，应为“]”未捕获语法错误：rest元素必须是ArrayOps中的最后一个元素。对不起，我以为rest运算符可以用作数组中的第一个运算符。您可以使用

.pop（）

方法，也可以只使用长度来获得正确的长度，而不需要任何花哨的东西。我已经更新了答案。谢谢Meligy，[…leftElements，rightElement]这些变量是从哪里来的？当我尝试上面的解构时，我收到一个eslint警告。分析错误时出错：意外标记，应为“]”未捕获语法错误：rest元素必须是ArrayOps中的最后一个元素。对不起，我以为rest运算符可以用作数组中的第一个运算符。您可以使用

.pop（）

方法，也可以只使用长度来获得正确的长度，而不需要任何花哨的东西。我已经更新了答案来实现这一点。谢谢Taki，您从[…firstElems，last]=arr；未捕获语法错误：rest元素必须是中的最后一个元素