javascript - React.js 中的 Spread Notation 渲染函数和变量作用域

Question

我有一个使用 es6 类表示法定义的 React 组件。在渲染函数中，我尝试使用扩展符号将一些状态变量传递到子组件中:

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

你能试试这个吗？