Question

我试图将数据数组从父组件传递到子组件，但是在子组件中我没有得到数据数组。请问我在哪里做错了。

在父组件中，我从服务获取数据： var tableNames = [DataService.getTableNames()]; 将数组传递给子组件： <DataQueryInterface tableNames={[tableNames]}/> 在子组件中，我试图像这样破坏结构： var tableNames = [props.tableNames]

您能帮我吗...

Answer 1

这是我建议的结构：

var tableNames = [ DataService.getTableNames() ]; // Data returned by the function is the placed inside a new `[]`

如果DataService.getTableNames()本身返回一个数组，则可以将其直接分配给tableNames，如下所示：

var tableNames = DataService.getTableNames(); // no need to wrap that inside another []

清除后，将数组传递给子组件将如下所示：

<DataQueryInterface tableNames={tableNames}/>

在子组件中，您可以按如下所示进行分解：

var { tableNames } = props;
// tableNames now contains reference to passed on `[]` from parent.

注意props是一个包含属性名称tableNames的对象，该属性名称包含对数组的引用。

Answer 2

如果DataService.getTableNames()返回一个数组，则应该像这样var tableNames = DataService.getTableNames();进行分配，然后将其传递给组件<DataQueryInterface tableNames={tableNames}/>。

根据我们对需求的了解，这是一个简单的示例：

class DataService {
  getTableNames() {
    return ['John', 'Doe'];
  }
}
class Child extends React.Component {
  render() {
    const tableNames = this.props.tableNames;
    console.log('child names', tableNames)
    return (<div>{tableNames}</div>);
  }
}
class Parent extends React.Component {
  constructor() {
    super();
    const service = new DataService();
    this.tableNames = service.getTableNames();
    console.log('parent names', this.tableNames);
  }

  render() {
    return (<Child tableNames={this.tableNames}/>);
  }
}

React.render(<Parent />, document.getElementById('app'));

这也是一个可行的jsfiddle https://jsfiddle.net/Lh54mfwa/

如何在ReactJS中将数据数组从一个组件传递到另一个组件

2 个答案: