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

Question

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

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

标头具有简单的静态内容。在测试中，我使用页面页面加载时的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>
    );
}