javascript - 在另一个表的行中渲染表

我想在反应中创建这样的东西：



我创建一个renderTable和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>
  );
};

renderTable是这样的：

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

但这是行不通的。我想用另外两种方式来做到这一点。对于每一行或主表，我必须放置辅助表。有关如何执行此操作的任何想法？

最佳答案

尝试使用此：

在renderInside方法中：

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

在renderTable方法中：

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

还有一件事，我认为您需要在slip方法而不是{renderInside(slipsList)}内传递slipsList。

关于javascript - 在另一个表的行中渲染表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43143317/