javascript - 更改反应组件中的优先级

Question

我有一个看起来像这样的组件。

在渲染中，它被写为：

    <div className="experiments-list-container">
      {/* Select ID on row hover so that Link can direct it correctly*/}
      <Link 
        to={'/i/edit/' + this.state.selectedID}
        style={{ 
          textDecoration: 'none',
          color: 'black'
        }}
      >
      <List
        onRowHovered={this.getExperimentID}
        toggleSwitch={this.changeStatus}
        rowItems={this.state.experimentData}
        shouldShowItem={item => {
          return item.status === this.state.viewActive;
        }}
        viewActive={this.state.viewActive}
      />
      </Link>

切换开关位于子组件中，它的使用方式如下

  render() {
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    //alert(this.props.rowItems.status)
    if (this.state.show) {
      return (
        <tr
          className="experiment-list__row"
          onMouseOver={() => this.props.onRowHovered(this.props.rowItems.id)}
        >
          <td>{this.props.rowItems.name}</td>
          <td>{this.props.rowItems.owner}</td>
          <td>{dateDisplay}</td>
          <td className="experiment-list--col__switch">
            <Switch
              color="primary"
              checked={this.props.rowItems.status}
              onChange={this.change}
            />
          </td>
        </tr>
      );
    } else {
      return null;
    }
  }

我希望开关和链接一起工作，但由于开关在子组件中，它不会受到影响。我怎样才能将它们分开？

编辑

母公司

  changeStatus(rowID, rowStatus) {
    // close if the selected employee is clicked
    makeMutation(UpdateExperimentQuery, {
      update: {
        id: rowID,
        data: {
          status: !rowStatus,
        },
      },
    })
      .then(responseData => {
        setTimeout(() => {
          this.componentWillMount();
        }, 1000);
      })
      .catch(err => {
        console.log(err);
      });
  }

儿童补偿

  change() {
    this.props.toggleSwitch(this.props.rowItems.id, this.props.rowItems.status);
  }


const List = props => {
  return (
    <table className="experiment-list">
      <tbody>
        <ListHeader />
        {props.rowItems.map((data, i) => (
          <ListRow
            key={i}
            rowItems={data}
            onRowHovered={props.onRowHovered}
            toggleSwitch={props.toggleSwitch}
            shouldShowItem={props.shouldShowItem}
            viewActive={props.viewActive}
          />
        ))}
      </tbody>
    </table>
  );
};

  render() {
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    //alert(this.props.rowItems.status)
    if (this.state.show) {
      return (
        <tr
          className="experiment-list__row"
          onMouseOver={() => this.props.onRowHovered(this.props.rowItems.id)}
        >
          <td>{this.props.rowItems.name}</td>
          <td>{this.props.rowItems.owner}</td>
          <td>{dateDisplay}</td>
          <td className="experiment-list--col__switch">
            <Switch
              color="primary"
              checked={this.props.rowItems.status}
              onChange={this.change}
            />
          </td>
        </tr>
      );
    } else {
      return null;
    }
  }
}

更改基本上只是更新了数据库中的数据。我认为这与组件的优先级没有任何关系。

标签： javascriptreactjs