javascript - 更改 Prop 时， react 表重新渲染不起作用

Question

我正在使用 react-table并希望在有/没有 subComponent 的情况下呈现表格基于从父元素传递的 Prop 。

我尝试更新状态——包含 data 和 columns 的新数组，但表格没有重新呈现。

codesandbox

js

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  }
];

const columns = [
  {
    Header: "a",
    accessor: "a"
  },
  {
    Header: "b",
    accessor: "b"
  },
  {
    Header: "c",
    accessor: "c"
  },
  {
    Header: "d",
    accessor: "d"
  }
];

class Table extends React.Component {
  state = {
    columns: this.props.columns,
    data: this.props.data
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.expand !== this.props.expand) {
      console.log("update data");
      this.setState({
        columns: [...nextProps.columns],
        data: [...nextProps.data]
      });
    }
  }

  render() {
    console.log(this.props.expand);
    return (
      <div>
        {this.props.expand ? (
          <ReactTable
            data={this.state.data}
            columns={this.state.columns}
            showPagination={false}
            defaultPageSize={data.length}
            resizable={false}
            SubComponent={row => {
              return (
                <div>
                  <h1>expanded state</h1>
                </div>
              );
            }}
          />
        ) : (
          <ReactTable
            data={data}
            columns={columns}
            showPagination={false}
            defaultPageSize={data.length}
            resizable={false}
          />
        )}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    expand: true
  };

  componentDidMount() {
    const that = this;
    setTimeout(() => {
      that.setState({ expand: false });
    }, 2000);
  }

  render() {
    const { expand } = this.state;
    return (
      <div>
        <Table columns={columns} data={data} expand={expand} />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 1

查看源代码，您应该能够重置 SubComponent，但您无法通过将其设置为未定义来完成此操作(这与 props 在 props 中未定义时如何不覆盖状态有关)。

将 SubComponent 设置为 null 或 false 将获得 desired results

class Table extends React.Component {
  render() {
    console.log("props:", this.props);
    return (
      <div>
        <ReactTable
          data={this.props.data}
          columns={this.props.columns}
          showPagination={false}
          defaultPageSize={this.props.data.length}
          resizable={false}
          SubComponent={
            this.props.expand
              ? row => (
                  <div>
                    <h1>expanded state</h1>
                  </div>
                )
              : false
          }
        />
      </div>
    );
  }
}