收到错误：“一个有效的做出反应元素（或空）必须返回”错误与ReactJS

Question

组件之一下面是我的代码

render() { 
    const mainSection = (
    <MainSection 
     title={ __('main.section.title') } 
     onClose={ this.handleOnClose } 
    /> 
); 

    const secondarySection = (

     { 
     this.state.error ? (
     <Message 
      onClose={ this.handleMessageClose } 
      style={ styles.message } 
     > 
      { this.state.error } 
     </Message> 
     ) : null 
     } 

     <div> 
     <SecondaryForm 
      data={ { 
       username: this.state.username, 
       } } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
     /> 
     </div> 
); 
    return (
     this.state.show.section === true ? { secondarySection } : { mainSection } 
    ); 
    } 

我得到这个错误：

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

请帮我这个，谢谢。

Answer 1

您的secondarySection是一对元素。如果您的渲染方法必须返回<X1/>和<X2/>，请将它们包装为<div><X1/><X2/></div>，以使其全部位于单个元素内。 React假定每个组件都是一个元素或null，所以它拒绝其他任何东西。

const secondarySection = (
    <div> 
     { 
     this.state.error ? (
     <Message 
      onClose={ this.handleMessageClose } 
      style={ styles.message } 
     > 
      { this.state.error } 
     </Message> 
     ) : null 
     } 

     <div> 
     <SecondaryForm 
      data={ { 
       username: this.state.username, 
       } } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
     /> 
     </div> 
    </div> 
); 

Answer 2

组件应该只返回一个元素。你需要将你的返回包裹在一个元素/ div中。

你的代码应该是这样的：

render() { 
    const mainSection = (
    <MainSection 
     title={ __('main.section.title') } 
     onClose={ this.handleOnClose } 
    /> 
); 

    const secondarySection = (
     <div> 
     { 
      this.state.error ? (
      <Message 
       onClose={ this.handleMessageClose } 
       style={ styles.message } 
      > 
      { this.state.error } 
      </Message> 
     ) : null 
     } 

     <SecondaryForm 
      data={ { 
       username: this.state.username, 
       } } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
     /> 
     </div> 
); 
    return (
     this.state.show.section === true ? { secondarySection } : { mainSection } 
    ); 
    } 

Answer 3

做那家伙说，只是从this.state.show.section === true ? { secondarySection } : { mainSection }删除{}像this.state.show.section === true ? secondarySection : mainSection

Answer 4

变化：

*使用{}使用JavaScript代码在HTML元素内部，一旦你使用{}然后没有把另一个{}里面，就像你用在te三元运算符。

* JSX不能返回多个元素，因此总是尝试将所有代码包装在<div>或其他任何包装元素中。

试试这个：

render() { 
    const mainSection = (
    <MainSection 
     title={ __('main.section.title') } 
     onClose={ this.handleOnClose } 
    /> 
); 

    const secondarySection = this.state.error ? 
     <div> 
      <Message 
       onClose={ this.handleMessageClose } 
       style={ styles.message } 
      > 
       { this.state.error } 
      </Message> 
      <SecondaryForm 
       data={ 
       {username: this.state.username,} 
       } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
      /> 
     </div> 
     : null; 

    return(
     <div> 
      {this.state.show.section === true ? secondarySection : mainSection } 
     </div> 
    ); 
}