有効なReact要素（またはnull）が返されなければなりません.ReactJSのエラー

Question

私のアプリケーションでauthenticateリンクへのコンポーネントを作成しようとしています。

私は次のようにそれを使用したい：私はこのコードを書かれていることについては

<Authenticated> 
    <Link to="/login">Login</Link> 
</Authenticated> 

。

import React from 'react' 
import { connect } from 'react-redux' 

class Authenticated extends React.Component { 
    render() { 
    let content = null; 
    if(this.props.authenticate) { 
     content = this.props.children 
    } 
    return (
     <span>{content}</span> 
    ) 
    } 
} 

function mapStateToProps(state){ 
    return { 
    authenticate: state.auth.authenticated 
    } 

} 
export default connect(mapStateToProps)(Authenticated) 

検証後に私のリンクが正しく表示されます。しかし、ここの問題はspanです。

<span>{content}</span>、その戻り値Linkがspanでラップされています。それは私がそれをグローバルにすることを許していない（どこにでも置く）。

私はspanラッパーの投げ違いを取り除くことにします。

Uncaught Error: Authenticated.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. at invariant (invariant.js:44) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:831) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) at Object.mountComponent (ReactReconciler.js:46) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) at Object.mountComponent (ReactReconciler.js:46) at ReactDOMComponent.mountChildren (ReactMultiChild.js:238) at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:691)

出力からspanを削除してください。

Answer 1

あなたはDOCあたりとして、React.Fragmentを利用することができます：

Fragments let you group a list of children without adding extra nodes to the DOM.

はこのようにそれを書く：実際のDOM内

class Authenticated extends React.Component { 
    render() { 
    let content = null; 
    if(this.props.authenticate) { 
     content = this.props.children 
    } 
    return (
     <React.Fragmen>{content}</React.Fragment> 
    ) 
    } 
} 

、フラグメントをスキップして、直接コンテンツをレンダリングします反応します。