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.datarender() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; // <div>{console.log(this.state.data)}</div>&nbsp; &nbsp; &nbsp; <Table&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {...{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: this.state.data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns: this.state.columns,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infinite,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; debug: true&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp;&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );&nbsp; }你可以试试这个吗？