Question

我在此组件中写了一个Employee组件，我以表格格式显示了雇员列表。在这种表格格式中，我提供了一个编辑列，该列呈现另一个组件的权限。我想将该组件显示在该对应行的正下方（我相信这意味着将下一行中的组件呈现在所选对应行的正下方）。我做了这样的事情：

<tr>
   <td>
      <ul>
         <li className="u-name" key={emp.empId}>
            {enableempDetails ? (
            <Link to={"/empdata/" + emp.empId}>
            {emp.empName}
            </Link>
            ) : (
            <span>{emp.empName}</span>
            )}
         </li>
      </ul>
   </td>
   <td>
      <ul>
         <li>{emp.status}</li>
      </ul>
   </td>
   {this.props.permissionView && this.props.app != "undefined" ? (
   <td>
      <a
         href="javascript:void(0)"
         onClick={e => {
      this.showRolesForm(e, emp.empId);
      }}>
      <i className="fa fa-edit" />
      </a>
      {this.state.rolePermission && (
      <Permissions
         empId={emp.empId}
         empType={"EMP"}
         />
      )}
   </td>
   ) : null}
   {this.props.emp.accountType == "SERVICE" ? (
   <td className="action-div">{downloadButton}</td>
   ) : null}
   <td className="action-div">{deleteButton}</td>
</tr>

Permissions组件位于对应行的下方，但不在整个新行中，它仅在new中呈现。如何在表格的整个新行中呈现此Permissions组件。

Answer 1

您可以将Permission组件包装在新的<tr>标记中。但是，由于return语句只能接受一个孩子，因此需要将两对<tr>标签用<React.Fragment>包装，如下所示：

<React.Fragment>
    <tr>
        <td>
            <ul>
                <li className="u-name" key={emp.empId}>
                    {enableempDetails ? (
                        <Link to={"/empdata/" + emp.empId}>
                            {emp.empName}
                        </Link>
                    ) : (
                            <span>{emp.empName}</span>
                        )}
                </li>
            </ul>
        </td>
        <td>
            <ul>
                <li>{emp.status}</li>
            </ul>
        </td>
        {this.props.permissionView && this.props.app != "undefined" ? (
            <td>
                <a
                    href="javascript:void(0)"
                    onClick={e => {
                        this.showRolesForm(e, emp.empId);
                    }}>
                    <i className="fa fa-edit" />
                </a>

            </td>
        ) : null}
        {this.props.emp.accountType == "SERVICE" ? (
            <td className="action-div">{downloadButton}</td>
        ) : null}
        <td className="action-div">{deleteButton}</td>
    </tr>
    {this.props.permissionView
    && this.props.app != "undefined"
    && this.state.rolePermission
    && (<tr>
            <td></td>
            <td></td>
            <td>
                <Permissions
                    empId={emp.empId}
                    empType={"EMP"}
                />
            </td>
        </tr>)}
</React.Fragment>

两个空的<td>标签用于使Permission组件与“编辑”按钮垂直对齐，如果不需要，可以将其删除。

点击clickjs添加行

1 个答案: