React入门系列教程（五）根据属性值返回不同的组件

现在我们有一个Hi组件，它有个someone属性，在使用时给someone赋值为null。

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi({someone}) {
        return (<div>Hi, {someone}</div>)
    }
    
    ReactDOM.render(<Hi someone={null} />, rootElement)
</script>

下面我可以根据someone的值来返回不同的组件：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi({someone}) {
        //根据属性值返回不同的组件
        if (!someone) {
            return <div>Hi, nobody</div>
        } else {
            return (<div>Hi, {someone}</div>)
        }
    }
    
    ReactDOM.render(<Hi someone={null} />, rootElement)
</script>

如果我们想不使用if else，而使用三元操作符，大家可以试一下，是会报错的，是因为JSX的缘故。但是我们知道JSX在运行时会被翻译为js，那我们直接使用js创建组件好了，进而可以使用三元操作符了。

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi({someone}) {
        return !someone 
            ? React.createElement('div', null, 'Hi, nobody')
            : React.createElement('div', null, 'Hi, ' + someone)
    }
    
    ReactDOM.render(<Hi someone={null} />, rootElement)
</script>

我们在return的时候，在外面再包一层div：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi({someone}) {
        return (
            <div>
                {!someone 
                    ? React.createElement('div', null, 'Hi, nobody')
                    : React.createElement('div', null, 'Hi, ' + someone)}
            </div>
        )
    }
    
    ReactDOM.render(<Hi someone={null} />, rootElement)
</script>

现在我们把js代码变回JSX看看行不行：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi({someone}) {
        return (
            <div>
                {!someone 
                    ? (<div>Hi, nobody</div>)
                    : (<div>Hi, {someone}</div>)
                }
            </div>
        )
    }
    
    ReactDOM.render(<Hi someone={null} />, rootElement)
</script>

完全没有问题。我们这样变来变去的目的，是因为在大括号中是无法写if else语句的，只可以用三元操作符。