在 React Component 中返回一个结束标签和一个开始标签？答案

【问题标题】：Returning a closing tag and a starting tag in React Component?在 React Component 中返回一个结束标签和一个开始标签？
【发布时间】：2018-07-31 03:05:56
【问题描述】：

有没有什么办法可以拥有表单的组件：

function Break(){
  return <React.Fragment></div><div className="section"></React.Fragment>;
}

基本上我试图拥有它，以便每当显示组件时，它都会关闭一个

<div className="section>

然后开始另一个

<div className="section">

【问题讨论】：

不。在反应组件的上下文中没有意义。你为什么认为你想要这个？
请记住，jsx 实际上编译为正常的函数调用。调用React.createElement 时没有“打开”和“关闭”之类的东西，只有element type、props 和children
@azium 基本上在我将接收的 JSON 中，我将获得要呈现的布局元素数组。其中有一个“break”元素，它表示一个部分的结束和一个部分的开始。我想我会用className“section”包装要在div中呈现的元素，然后在出现“Break”时将它们关闭并相应地再次打开。
很难说你真正需要什么。听起来像通常包装部分然后渲染一个<br />或<hr />，其中break元素是
不，你不能。你必须嵌入整个组件，这意味着一旦你打开一个标签，你就必须关闭它。

标签： javascript reactjs components

【解决方案1】：

基本上在我将收到的 JSON 中，我将获得一个数组布局元素，要渲染。其中有一个“break”元素，将表示一个部分的结束和一个部分的开始。一世想我会包装要在 div 中呈现的元素 className "section" 并关闭它们并相应地再次打开它每当“Break”出现时

虽然你最初要求的东西是不可能的，但我有一个解决方案来解决你想要完成的事情。

你可以做的是split你的数组使用“break”元素作为你的分隔符。然后map每组元素被拆分并包装在<section>元素中。然后，您可以将该数组传递给 render 内的 return 语句。

render(){
  const allElems = JSON.parse(jsonArray)
                       .toString()
                       .split('breakElem')
                       .map(setOfElem => <section>{setOfElem.split(',')}</section>)
  return <div>{allElems}</div>
}

此代码尚未经过测试，但希望它可以帮助您完成您想要实现的目标。

【讨论】：

【解决方案2】：

我想您正在尝试呈现特定的编号。每个父元素的某种列表或行中的项目（部分）。例如，这可以是<div className="parent"></div>。所以结果是：

<div>
<div className="parent">
    <div className="section></div>
    <div className="section></div>
    <div className="section></div>
</div>

<div className="parent">
    <div className="section></div>
    <div className="section></div>
    <div className="section></div>
</div>
</div>

假设您有一个数字数组[1,2,3,4,5,6] 要在其中渲染

<div className="section></div>

例如

<div className="section>1</div>
<div className="section>2</div>

等等。

您可以根据每个<div className="parent"> 要渲染的<div className="section></div> 项目的数量创建数组块假设您想要每个<div className="parent"> 3 个<div className="section></div>，如上面的代码所示。您可以使用 lodash 的 chunk() 方法来执行此操作。 https://lodash.com/docs#chunk

parents = lodash.chunk([1,2,3,4,5,6], 3)
//parents is [[1,2,3], [4,5,6]]

将每个内部数组视为父元素，将每个父元素中的项目视为节元素。

因此在反应中它会呈现为：

render() {
   const parents = lodash.chunk([1,2,3,4,5,6], 3)
   return (
    <div>
     {
       parents.map((parent) => (
         <div className="parent">
         {
           parent.map((section) => (
             <div className="section">{ section }</div>
           ))
         }
         </div>
       ))
     }
    </div>
   )
}

【讨论】：