React.js中的擴展符號呈現功能和變量范圍

Question

我有一個使用es6類符號定義的react組件。 在render函數中，我嘗試使用傳播符號將一些狀態變量傳遞到子組件中：

  render() {
    return (
      // <div>{console.log(this.state.data)}</div>
      <Table 
        {...{
          data,
          columns,
          infinite,
          debug: true
        }} 
      />
    );
  }

這行不通： data is not defined 。 使用this.state.data和state.data也不起作用（導致Unexpected keyword 'this'和Unexpected token ）。

但是，取消注釋<div>{console.log(this.state.data)}</div>表示狀態在范圍內。 最后，這可行：

<Table data={this.state.data} columns={this.state.columns}/>

在這種情況下，我是否會以某種方式濫用傳播符號？ 我已經看到它在React函數組件中工作。

Answer 1

我認為您使用的是錯誤的變量。 data確實是不確定的。 您實際的數據位於this.state.data

render() {
    return (
      // <div>{console.log(this.state.data)}</div>
      <Table 
        {...{
          data: this.state.data,
          columns: this.state.columns,
          infinite,
          debug: true
        }} 
      />
    );
  }

你可以試試這個嗎？