React.js 渲染函数和变量范围中的扩展符号

Question

我有一个使用 es6 类符号定义的反应组件。在渲染函数中，我尝试使用扩展符号将一些状态变量传递给子组件：

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

你能试试这个吗？