Вызов Multiple компонента в том же странице в React.js

Question

Я создаю реагировать главную страницу, которая рендеринг две реакции компоненты, как

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

Заголовок оказывает простой статический content.In тест Я зову внешний API с помощью Redux на странице загрузки страницы в

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 component.Header и испытания работают отлично, когда я делает их отдельно.
Когда я пытаюсь объединить, отображается только заголовок, но Test не может извлекать данные из API.

Answer 1

Вы не можете сделать что-то вроде этого:

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

может быть только одна разметка в return из render()

, если вы хотите, чтобы сделать заголовок и тестирование вместе здесь, вы должны оберните их одной разметкой, например:

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