菜鸟React（二）

条件渲染

方法一（变量）：

//LoginControl.js
import React from 'react'
function LoginButton(props) {
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    );
}

function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    );
}//一些小的组件元素可以用函数式组件
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn: false};
    }

    handleLoginClick() {
        this.setState({isLoggedIn: true});
    }

    handleLogoutClick() {
        this.setState({isLoggedIn: false});
    }

    render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button;

        if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />;
        }

        return (
            <div>
                {button}
            </div>
        );
    }
}
export default LoginControl

//App.js
import React from 'react';
import LoginControl from './components/LoginControl'
import './App.css';

function App() {
  return (
    <div className="App" >
        <LoginControl/>
    </div>
  );
}
export default App;

方法二
使用逻辑 && 操作符的内联 if 用法

//Mailbox.js
import React from 'react'
class MailBox extends React.Component {
    render() {
        return (
            <div>
                <h1>hello!</h1>
                {this.props.unreadMessages.length>0&&
                <h2>
                    You have {this.props.unreadMessages.length} unread messages.
                </h2>
                }
            </div>
        )
    }
}
export default MailBox

//App.js
import React from 'react';
import MailBox from './components/MailBox'
import './App.css';

function App() {
    const messages = ['React', 'Re: React', 'Re:Re: React'];
    const unreadMessages = []
  return (
    <div className="App" >
        <MailBox unreadMessages={unreadMessages} />
    </div>
  );
}

export default App;

在 JavaScript 中， true && expression 总是会评估为 expression ，而 false && expression 总是执行为 false 。因此，如果条件为 true ，则 && 后面的元素将显示在输出中。 如果是 false，React 将会忽略并跳过它。

方法三
使用条件操作符的内联 If-Else

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

当希望组件隐藏时，返回 null 而不是其渲染输出。

列表

//List.js
import React from 'react'
function ListItem(props){
    return (
        <li>{props.value}</li>
    )
}
export default class List extends React.Component {
    constructor(props){
        super(props)
        this.list = props.numbers.map((number)=>{
            return <ListItem value={number} key={'X'+number}/>
        })
    }
    render() {
        return (this.list)
    }
}

import React from 'react';
import MailBox from './components/MailBox'
import List from './components/List'
import './App.css';

function App() {
    const messages = ['React', 'Re: React', 'Re:Re: React'];
    const unreadMessages = []
    const numbers = [1,2,3,4]
  return (
    <div className="App" >
        <MailBox unreadMessages={unreadMessages} />
        <List numbers={numbers} />
    </div>
  );
}
export default App;

注意点：

keys 只在数组的上下文中存在意义。例如，如果你提取 一个 ListItem 组件，应该把 key 放置在数组处理的 元素中，不能放在 ListItem 组件自身中的

• 根元素上。
  可以直接在在 JSX 中嵌入 map()，不使用变量，具体看实际开发。

表单

import React from 'react'
export default class FirstForm extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            value:''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleChange(e){
        this.setState({
            value:e.target.value
        })
    }
    handleSubmit(e){
        console.log(this.state.value)
        e.preventDefault()
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="submit" />
            </form>
        )
    }
}
//受控组件

注意textarea,select中与Hmtl中的区别 http://react.html.cn/docs/forms.html

状态提升

//父组件 Calculator.js
import React from 'react'
import TemperatureInput from './TemperatureInput'
function tryConvert(temperature, convert) {
    const input = parseFloat(temperature);
    if (Number.isNaN(input)) {
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
}
function toCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
    return (celsius * 9 / 5) + 32;
}
function BoilingVerdict(props) {
    if (props.celsius >= 100) {
        return <p>The water would boil.</p>;
    }
    return <p>The water would not boil.</p>;
}
export default class Calculator extends React.Component {
    constructor(props){
        super(props)
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {
            temperature:'',
            scale:'c'
        }
    }
    handleCelsiusChange(temperature){
        this.setState({
            temperature:temperature,
            scale:'c'
        })
    }
    handleFahrenheitChange(temperature){
        this.setState({
            temperature:temperature,
            scale:'f'
        })
    }
    render() {
        const temperature = this.state.temperature
        const scale = this.state.scale
        const cel = scale==='f'?tryConvert(temperature,toCelsius):temperature
        const fahrenheit = scale==='c'?tryConvert(temperature,toFahrenheit):temperature
        return (
            <div>
                <TemperatureInput scale="c" temperature={cel}
                    onTemperatureChange={this.handleCelsiusChange} />
                <TemperatureInput scale="f" temperature={fahrenheit}
                    onTemperatureChange={this.handleFahrenheitChange} />
                <BoilingVerdict celsius={parseFloat(cel)}></BoilingVerdict>
            </div>
        )
    }
}

//子组件 TemperatureInput.js
import React from 'react'
export default class TemperatureInput extends React.Component {
    constructor(props){
        super(props)
        this.handleChange = this.handleChange.bind(this)

    }
    handleChange(e){
        this.props.onTemperatureChange(e.target.value)
    }
    render(){
        const temperature = this.props.temperature
        const scale = this.props.scale
        return (
            <input onChange={this.handleChange} value={temperature}/>
        )
    }
}

关键点在于任意一个Input数据更新时候，由于Input设置为受控组件，触发onChange中的处理，修改props里面传递进来的事件onTemperatureChange引发父组件事件（很像vue中的emit），然后在回调逻辑中进行数据处理(setState),来重新渲染自身,所以两个Input都依赖父组件中传入的prop值（temperature），UI都发生变化。

组合（类似vue的slot）

//Dialog.js
import React from 'react'
export default class Dialog extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.props.header}</h1>
                <p>{this.props.content}</p>
            </div>
        )
    }
}

//App.js
import React from 'react';
import Dialog from './components/Dialog'
import './App.css';
function App() {
  return (
    <div className="App" >
        <Dialog header={
            <div>我是大哥</div>
        } content={
            <span>你好这是正文</span>
        }
        />
    </div>
  );
}
export default App;