Повторное отображение React-таблицы не работает при смене реквизита - PullRequest
Новая
       8

Повторное отображение React-таблицы не работает при смене реквизита

0 голосов
/ 31 октября 2018

Я использую response-table и хотел бы отобразить таблицу с / без subComponent на основе реквизита, переданного из родительского элемента.

Я пытался обновить состояние - новый массив с 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"));

1 Ответ

0 голосов
/ 31 октября 2018

Глядя в исходный код, вы должны иметь возможность сбросить субкомпонент, однако вы не можете сделать это, установив для него значение undefined (что связано с тем, что реквизиты не будут перезаписывать состояние, если оно не определено в реквизитах).

Если для SubComponent задано значение null или false, желаемые результаты получатся 

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>
    );
  }
}
...