добавить строки по нажатию реагировать

Question

Я написал один компонент Сотрудник в этом компоненте. Я показываю список сотрудников в табличном формате. В этом формате таблицы у меня есть столбец редактирования, который предоставляет разрешения для другого компонента. Я хочу показать этот компонент чуть ниже этой соответствующей строке (я полагаю, что означает визуализировать компонент в следующей строке чуть ниже той соответствующей строке, которая была выбрана). Я сделал что-то вроде этого:

<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 находится ниже этой соответствующей строки, но не во всей новой строке, он отображается только в новой. Как отобразить этот компонент «Разрешения» во всей новой строке таблицы.

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 с кнопкой редактирования, вы можете удалить их, если это не то, что вы хотели.