Javascript 在react中的另一个表的行中呈现一个表

我想在react中创建如下内容：

我创建了一个可渲染和renderInside函数。在renderTable内部，我将renderInside称为：

const renderInside = (slipsList) => {
  if (slipsList) {
    return (
      <table className="table table-bordered">
        <thead>
          <tr>
            <th className="table__header">
              <div className="table__header__text">
                <span className="table__header--selected">
                  Symbol
                </span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          {slipsList.map((slip, i) =>
            <tr key={i}>
              <td>{slip.amount}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }
  return (
    <div>Loading...</div>
  );
};

const renderTable = (slipsList) => {
  if (slipsList) {
    return (
      <div className="table-scrollable-container">
        <div className="table-scrollable">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th className="table__header">
                  <div className="table__header__text">
                    <span className="table__header--selected">
                      Date Valeur
                    </span>
                  </div>
                  <div className="table__header__arrow" />
                </th>
              </tr>
            </thead>
            <tbody>
              {slipsList.map((slip, i) =>
                <tr key={i}>
                  <td className="table-sticky--first-col">
                    {slip.confirmationDate}
                  </td>
                  <td>
                    {slip.netAmountEuro}
                  </td>
                  <tr className="collapsed">
                    <td colSpan="10">
                    {renderInside(slipsList)}
                  </td>
                </tr>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
  return (
    <div>Loading...</div>
  );
};

const renderInside=（slipsList）=>{
if（滑动列表）{
返回(
象征
{slipsList.map（（slip，i）=>
{slip.amount}
)}
);
}
返回(
加载。。。
);
};

可渲染文件如下所示：

const renderInside = (slipsList) => {
  if (slipsList) {
    return (
      <table className="table table-bordered">
        <thead>
          <tr>
            <th className="table__header">
              <div className="table__header__text">
                <span className="table__header--selected">
                  Symbol
                </span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          {slipsList.map((slip, i) =>
            <tr key={i}>
              <td>{slip.amount}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }
  return (
    <div>Loading...</div>
  );
};

const renderTable = (slipsList) => {
  if (slipsList) {
    return (
      <div className="table-scrollable-container">
        <div className="table-scrollable">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th className="table__header">
                  <div className="table__header__text">
                    <span className="table__header--selected">
                      Date Valeur
                    </span>
                  </div>
                  <div className="table__header__arrow" />
                </th>
              </tr>
            </thead>
            <tbody>
              {slipsList.map((slip, i) =>
                <tr key={i}>
                  <td className="table-sticky--first-col">
                    {slip.confirmationDate}
                  </td>
                  <td>
                    {slip.netAmountEuro}
                  </td>
                  <tr className="collapsed">
                    <td colSpan="10">
                    {renderInside(slipsList)}
                  </td>
                </tr>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
  return (
    <div>Loading...</div>
  );
};

const renderable=（slipsList）=>{
if（滑动列表）{
返回(
日期：瓦勒尔
{slipsList.map（（slip，i）=>
{slip.confirmationDate}
{slip.euro}
{renderInside（slipsList）}
)}
);
}
返回(
加载。。。
);
};

但它不起作用。我用另外两种方法来做这件事，但我想。对于每一行或主表，我必须放置辅助表。有什么办法吗？

试着用这个：

在

renderInside

方法中：

{slipsList.map((slip, i) => (  //added this bracket
      <tr key={i}>
         <td>{slip.amount}</td>
      </tr>
    )
 )}

{slipsList.map((slip, i) => (   //added this bracket
    <tr key={i}>
      <td className="table-sticky--first-col">
        {slip.confirmationDate}
      </td>
      <td>
        {slip.netAmountEuro}
      </td>
      <tr className="collapsed">
        <td colSpan="10">
          {renderInside(slipsList)}
        </td>
      </tr>
    </tr>
  )
)}

还有一件事，我认为您需要在

{renderInside（slipsList）}

方法中传递

slip

，而不是

slipsList
尝试使用以下方法：

在
renderInside
方法中：

{slipsList.map((slip, i) => (  //added this bracket
      <tr key={i}>
         <td>{slip.amount}</td>
      </tr>
    )
 )}

{slipsList.map((slip, i) => (   //added this bracket
    <tr key={i}>
      <td className="table-sticky--first-col">
        {slip.confirmationDate}
      </td>
      <td>
        {slip.netAmountEuro}
      </td>
      <tr className="collapsed">
        <td colSpan="10">
          {renderInside(slipsList)}
        </td>
      </tr>
    </tr>
  )
)}

还有一件事，我认为您需要在
{renderInside（slipsList）}内传递
slip
method而不是
slipsList
是否显示任何内容？是否显示关于jsx封闭标记的错误。是否显示错误？相邻的jsx元素必须包装在封闭标记中？是否显示任何内容？是否显示关于jsx封闭标记的错误。是否显示错误？相邻的jsx元素必须用这样一个封闭的标签包装？{renderInside（slipsList，slip）}告诉我一件事，你想把相同的
slipsList
数组传递给其他函数还是数组的每个值？？两个数组的值都包含在slipsList中。因此，在我的方法中，我希望将相同的slipsList扩展到其他函数。也许我错了，你能显示你的数据
console.log（'slipsList'，slipsList）数组（22）0:对象1:对象2:对象3:对象4:对象5:对象6:对象7:对象8:对象9:对象10:对象11:对象12:对象13:对象14:对象15:对象16:对象17:对象18:对象19:对象20:对象21:对象像这样吗？{renderInside（slipsList，slip）}告诉我一件事，你想把相同的
slipsList
数组传递给其他函数还是数组的每个值？？两个数组的值都包含在slipsList中。因此，在我的方法中，我希望将相同的slipsList扩展到其他函数。也许我错了，你能显示你的数据
console.log（'slipsList'，slipsList）数组（22）0:对象1:对象2:对象3:对象4:对象5:对象6:对象7:对象8:对象9:对象10:对象11:对象12:对象13:对象14:对象15:对象16:对象17:对象18:对象19:对象20:对象21:对象