React学习：条件渲染

React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件 来决定创建渲染不同的元素，并且让 React 更新匹配的 UI 。

仔细阅读代码，你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。

---

一、怎么用

看下面dome就懂了,顺便看看我们 在多个页面写react 与 在一个页面写react的区别

例：多个页面

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

let obj = {name:'bty',age:12};   //数据

ReactDOM.render(<App {...obj}/>, document.getElementById('root'));

App.js

import React, { Component } from 'react';
import Greeting from './Greeting';

class App extends Component {
   
  constructor(props){
    super(props);
    this.state = {
      isLoggedIn:false
    };
  }
  handle = () => {
    this.setState(prevState => ({
      isLoggedIn: !prevState.isLoggedIn
    }));
  }
  render(){  
    let isLoggedIn = this.state.isLoggedIn;
    return (<div>
        <Greeting isLoggedIn={isLoggedIn} name={
  this.props.name}/>
        <button onClick={
  this.handle}>
          {isLoggedIn ? '退出登录' : '登录'}
        </button>
      </div>
    );
  }
}

export default App;

Greeting.js

import React, {Component} from 'react';

class Greeting extends Component{
   
     render(){
        let {name,isLoggedIn} = {...this.props};
        let text = isLoggedIn ? ('welcome you ,' + name +