Question

我正在创建一个反应主页面，它将两个反应组件呈现为

render() {
    return (
        <Header />             
        <Test />
    );
}

Header具有简单的静态内容。在测试中，我在页面加载时使用redux调用外部api

componentWillMount() {
    if (this.props.onPageLoadTest) {
        this.props.onPageLoadTest();
    }
}
render() {
    const { data } = this.props;
    return (
        <div>
            {
                data.map((a) => (

                    <div key={a.id}>{a.id}

                    </div>

                ))
            }
        </div>
    );
}

使用道具我在Test组件中显示内容.Header和Test在我单独渲染时工作正常当我尝试组合时，只显示Header，但Test无法从API获取数据。

Answer 1

你做不到这样的事情：

render() {
    return (
        <Header />             
        <Test />
    );
}

return

的render()中只能有一个标记

如果你想在这里一起渲染Header和Test，你必须用一个标记包装它们，如下所示：

render() {
    return (
        <div>
            <Header />             
            <Test />
        </div>
    );
}

在React.js中调用同一页面中的多个组件

1 个答案: