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

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 的对象，其中包含对数组的引用。