Javascript React.js呈现函数和变量范围中的扩展符号

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

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

---

在这种情况下，我是不是误用了扩展符号？我看到它在React函数组件中工作。

我认为您使用了错误的变量。

数据

确实未定义。您的实际数据位于

此.state.data

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

render（）{
返回(
//{console.log（this.state.data）}
);
}

---

您能试试这个吗？

当您指定对象时，如果名称与变量匹配，它允许您跳过该值。似乎您在任何地方都没有

数据

，因此它应该是

..{data:this.state.data，//这里的其他道具}

或者您可以在返回语句之前执行

const{data}=this.state

。看起来像是我不熟悉的JSX特定用法（而且很方便）。刚试过，效果不错。可能在

返回

：

常量{data，columns}=this.state之前添加解构

（和

infinite

？无法从问题中分辨出来）那么OP的版本（假设

infinite

在某个地方的范围内）将起作用。

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