Question

是否有任何方法可以使用表单的组件：

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

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

<div className="section>

并开始另一个

<div className="section">

Answer 1

基本上是在我接收的JSON中，我将获得一个要呈现的布局元素。其中包括＆＃34;休息＆＃34;元素将表示部分的结尾和部分的开头。一世想通知我将在div中包装要渲染的元素 className＆＃34; section＆＃34;并关闭它们并相应地再次打开它每当＆＃34;休息＆＃34;出现

虽然你原来要求的是不可能的，但我有一个解决你想要完成的事情的方法。

你可以做的是使用＆＃34; break＆＃34; split你的数组。元素作为您的分隔符。然后map分割的每组元素并将它们包装在<section>元素中。然后，您可以将该数组传递到return内的render语句。

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

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

Answer 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="section></div>要渲染多少<div className="parent">个项目来创建数组的块假设您需要每个<div className="section></div> 3 <div className="parent">，如上面的代码。您可以使用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]]

将每个内部数组视为父元素，并将每个父元素内部的项视为section元素。

因此在反应中，它将呈现为：

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

在React Component中返回结束标记和起始标记？

2 个答案: