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

您可以尝试吗？

React.js中的扩展符号呈现功能和变量范围

1 个答案: