在反应中渲染另一个表的行中的表

Question

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

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

但它不起作用。我使用另外两种方法来做到这一点，但我想要。对于每一行或主表，我必须放置辅助表。关于如何做到这一点的任何想法？

Answer 1

尝试使用这个：

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

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