React-table 更改道具时重新渲染不起作用

Question

我正在使用 react-table and would like to render the table with/without subComponent 基于从父元素传递的 prop。

我尝试更新状态 -- 带有 data 和 columns 的新数组，但是 table 没有重新呈现。

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 设置为 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>
    );
  }
}

React-table 更改道具时重新渲染不起作用

React-table rerendering doesn't work when props are changed

javascript

reactjs

react-table