在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>
    );
}