reactjs - 在 React 中有条件地渲染

Question

我想根据用户是否登录来呈现两个完全独立的组件。这是我的代码，

import React, {Component} from 'react';
import ContainerLogged from './components/logged/ContainerLogged'
import ContainerUnlogged from './components/unlogged/ContainerUnlogged'

class App extends Component {
    constructor(props){
        super(props)
        this.state = {isLoggedIn : false}
    }
    render(){
        const comp = this.state.isLoggedIn ? (
            <ContainerLogged />
        ): (
            <ContainerUnlogged />
        );
        return (

            {comp}
        );
    }
}
export default App;

这是我的 index.js

import 'normalize.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我收到以下错误，

Objects are not valid as a React child (found: object with keys {comp}). If you meant to render a collection of children, use an array instead.
    in App (at index.js:8)

我是 React 的新手，因此不明白这里发生了什么。

标签： reactjs

Answer 1

代替

return (

    {comp}
);

尝试

return comp;