ReactNatIve 自习系列----------------------------------------《一》

RN 学习之前需要有些js基础，ES6,React需要先学习。

简单做下学习ES6，React的笔记：

组件和props:

class ClassTest extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        let {name,age} = this.props;
        return (
            <div>
                Name is :{name},Age is {age}
            </div>
        );
    }
}

使用：          <ClassTest name="hahahahaha" age="18" />

props 是只读的不能修改，所以这个东西只是用来展示的。

如果想要修改怎么办的，那就使用state。

20181008:

React 条件渲染的几种方式：

1. 元素变量即用 if 判断

2. 与运算符 &&

{readMessage.length > 0 && (<h2>You have {readMessage.length} 条信息未读</h2>)}

3.三目运算符

4.阻止渲染返回 null 就可以了

列表组件：

直接上例子：

class ListTest extends React.Component{
    constructor(props) {
        super(props);
        this.numbers = this.props.numbers.map((number)=><li>{number}</li>);
        this.state = {
            name: '',
            age: null,
            sex: ['男', '女'],
        };
    }

    render(){
        return (
            <div>
                <ul >{this.numbers}</ul>
            </div>
        );
    }
}

但是上面的代码在运行时会出现一个错误：

于是我们修改成这个：

class ListTest extends React.Component{
    constructor(props) {
        super(props);
        this.numbers = this.props.numbers.map((number)=><li key={number}>{number}</li>);
        this.state = {
            name: '',
            age: null,
            sex: ['男', '女'],
        };
    }

    render(){
        return (
            <div>
                <ul >{this.numbers}</ul>
            </div>
        );
    }
}

这样就可以了，木有问题了

表单：

直接撸码：


class NameForm extends  React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:'Please write an essay about your favorite DOM element.',
        };


    }

    handleChange = (event) => {
        this.setState({value:event.target.value});
    }
    handleSubmit = (event)=>{
        alert('A name was submitted:' +this.state.value);
        event.preventDefault();
    }

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Pick your favorite La Croix flavor:
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="grapefruit">Grapefruit</option>
                        <option value="lime">Lime</option>
                        <option value="coconut">Coconut</option>
                        <option value="mango">Mango</option>
                    </select>
                </label>
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}

ReactNatIve 自习系列----------------------------------------《一》

猜你喜欢