Question

我有一个模态反应组件，该组件呈现一个表，该表遍历用户/电子邮件数组（waitList）并将其显示在标记中。我的目标是仅删除该行中的第一个border-top属性（参见图片）。

这是我的组件的摘要，以防我的描述不清楚-

  renderTableRows() {
    const iter = [];
    if (this.props.waitList !== null) {
      this.props.waitList.map(applicant => {
        iter.push(
          <tr>
            <td>{applicant.user.name}</td>
            <td>{applicant.user.email}</td>
          </tr>
        );
      });
    }
    return iter;
  }

  render() {
    return (
      <div>
        <Modal show={this.state.waitListModalIsOpen}>
          <Modal.Header>
            WAIT LIST ({this.props.waitListCount})
          </ Modal.Header>
          <Modal.Body>
            <table className={'table wait-list-table'}>
              <tbody>
                {this.renderTableRows()}
              </tbody>
            </table>
          </ Modal.Body>
          <Modal.Footer>
            <Button onClick={() => { this.closeWaitListModal(); }}>Cancel</Button>
          </ Modal.Footer>
        </Modal>
      </div>
    );
  }
}

我了解到，因为我在这里迭代每个td，因此nth-child将删除所提供的child参数的所有边框，而不仅仅是列表中的第一个。有没有一种方法可以使用CSS隐藏此边框？如果没有，欢迎提出有关如何在React组件中改善迭代逻辑的建议。

Answer 1

table tr td {border-top: solid gray 1px; }
table tr:first-child td {border-top: none;}

<table>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</tbody>
</table>

Answer 2

您可以按照以下步骤做一些事情：

JS：

renderTableRows() {
const iter = [];

if (this.props.waitList !== null) {
  this.props.waitList.map((applicant, index) => {
    iter.push(
      <tr>
        <td className={index === 0 ? "no-border-top" : ""}>
            {applicant.user.name}
        </td>
        <td>{applicant.user.email}</td>
      </tr>
    );
  });
}
return iter;

}

CSS：

.no-border-top {
    border-top: none;
}

您还可以像这样使用内联样式：

renderTableRows() {
const iter = [];
const noBorderTopStyle = {
    borderTop: "none"
}

if (this.props.waitList !== null) {
  this.props.waitList.map((applicant, index) => {
    iter.push(
      <tr>
        <td style={index === 0 ? noBorderTopStyle : null}>
            {applicant.user.name}
        </td>
        <td>{applicant.user.email}</td>
      </tr>
    );
  });
}
return iter;

}

Answer 3

按如下所示在tr上使用第一个孩子选择器：

tbody tr:first-child td{ 
    border-top:0;
}

隐藏border-top属性以动态生成

3 个答案: