Question

我正在构建一个具有正常行的表，然后是两行之后隐藏的表，直到单击加号图标为止。单击图标时，它应更改为减号，隐藏的行应更改CSS类。也应该反向工作。

import React from 'react';

class HiddenRow extends React.Component {
  render() {
    return (
      <tr className="hidden-row">
        <td>Stuff</td>
      </tr>
    );
  }
}

class NormalRow extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('here');
    // Expand rows if hidden change icon to fa-minus-circle
    // Hide rows if not and change icon to fa-plus-circle
  }

  render() {
    return (
      <tr>
        <td><i className="fa fa-plus-circle" onClick={this.handleClick}></i> Hello</td>
      </tr>
    );
  }
}

class ParentDiv extends React.Component {
  render() {
    return (
      <div>
        <table>
          <tbody>
            <NormalRow />
            <HiddenRow />
            <HiddenRow />
            <NormalRow />
            <HiddenRow />
            <HiddenRow />
          </tbody>
        </table>
      </div>
    );
  }
}

编辑：该表将包含多组普通行和隐藏行。单击正常行中的图标应仅切换两个直接隐藏的行。当我使用Angular但是切换到React时，我正在使用JQuery来执行此操作。我一直在玩JQuery和React作为解决方案。

Answer 1

您需要一种在NormalRow组件和两个HiddenRow组件之间进行通信的方法。在您的代码中，最好的方法是在ParentDiv中管理它，如下所示：

class ParentDiv extends React.Component {
  constructor() {
    this.state = {
      displayHiddenRows: false
    }
  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            <NormalRow onClick={this.handlePlusClicked.bind(this)} />
            <HiddenRow show={this.state.displayHiddenRows} />
            <HiddenRow show={this.state.displayHiddenRows} />
          </tbody>
        </table>
      </div>
    );
  }

  handlePlusClicked() {
    this.setState = {
      displayHiddenRows: true
    }
  }
}

在隐藏的行中，通过show prop添加className的条件。在正常行中，使用this.props.onClick函数替换handleClick。

Answer 2

看起来像NormalRow，后面的几个HiddenRow是同一个控件的一部分。也就是说，我会考虑为它们创建一个单独的React组件，它将封装click事件处理以及底层＆＃34; normal＆＃34;的查看/隐藏逻辑。并且＆＃34;隐藏＆＃34;行。所有这些都可以在纯React中实现（因此不需要jQuery）。

由新的更高级别组件生成的标记可以是单个或三个表行，具体取决于其状态。但由于render方法无法返回多个元素，因此您需要使用包装器，我的首选项将是<tbody>（而不是例如<div>，因为它往往被滥用这种情况）。据我所知，您可以根据需要在表格中包含尽可能多的<tbody>个标签，这样就可以选择有效的。

使用这个新组件（让我们称之为ActiveRow），您的ParentDiv组件将如下所示：

class ParentDiv extends React.Component {
  render() {
    return (
      <div>
        <table>
          <ActiveRow />
          <ActiveRow />
        </table>
      </div>
    );
  }
}

请注意，我已删除此<tbody>包装，因为它现在由ActiveRow返回。

React ES6 onClick更改其他组件

2 个答案: