02-React基础语法（2）

 

一、条件渲染

语法：使用原生 js 的 if 或者 三元表达式 判断

 

例子：判断用户是否登录，提示：已登录、未登录 （User组件）

 

<script type="text/babel">
            // 判断用户是否登录，提示：已登录、未登录 （User组件）
            class Login extends React.Component{
                constructor(props) {
                    super(props)
                    this.state = {
                        token : "adasd"
                    }
                }
                render(){
                    let { 
                        token
                     } = this.state
                    // if(token){
                    //     return <div><p>已登录</p></div>
                    // }else{
                    //     return <div><p>未登录</p></div>
                    // }
                    return <div><p>{ token ? '已登录' : '未登录' }</p></div>
                }
            }
 
            ReactDOM.render(<Login />,document.querySelector('#app'))
</script>

 

二、列表 & key

语法：

forEach 	遍历数组

map		修改数组的数据，返回一个【修改过】的数组

filter  	过滤数组的数据，返回一个【新】的数组

find    	找值

findIndex   找下标

let newArr = arr.map((item,index)=> {// 遍历arr数组，将里面的值挨个赋值给item
    return 数据  // return的数据会push到newArr中
})

例子：

        <script type="text/babel">
            class List extends React.Component{
                constructor(props){
                    super(props)
                    this.state = {
                        list : ['周瑜','小乔','诸葛'],
                        listObj : [
                            {id:1,content:'xxxxx1'},
                            {id:2,content:'xxxxx2'},
                            {id:3,content:'xxxxx3'},
                            {id:4,content:'xxxxx4'}
                        ]
                    }
                }
 
                render() {
                    let {
                        list,
                        listObj
                    } = this.state
 
                    let listNew = list.map((item,index) => {
                        return <li key={index}>{ item }</li>
                    })
                    let newListObj = listObj.map((item,index) => {
                        return <li key={index}>id:{ item.id },content：{ item.content }</li>
                    })
 
                    return <div>
                            <p>数组</p>
                            <ul>{listNew}</ul>
                            <p>对象</p>
                            <ul>{newListObj}</ul>
                        </div>
                }
            }
 
            ReactDOM.render(<List />,document.querySelector('#app'))
        </script>

三、表单

① 受控组件

渲染表单的React组件还控制着用户输入过程中表单发生的操作

② 非受控组件

value值为只读的0

如：input type='file'

 

③ 数据双向绑定

1. 绑定 value 值

2. change 事件触发

3. 跟新模型数据

 

例子：

<script type="text/babel">
        class Test extends React.Component{
            constructor(props){
                super(props)
                
 
                // 模型数据
                this.state = {
                    value1 : 'value1',
                    value2 : 2,
                    value3 : 'value3'
                }
            }
 
            render() {
                let {
                    value1,
                    value2,
                    value3
                } = this.state
                return (
                    <div>
                        <p>input</p>
                        <input type="text" name="value1" value = {value1} onChange = { this.onChangeFn.bind(this) }/>
                        <p>select</p>
                        <select name="value2" value = {value2} onChange = { this.onChangeFn.bind(this) }>
                            <option value="1">1</option>    
                            <option value="2">2</option>    
                            <option value="3">3</option>    
                        </select>
                        <p>textarea</p>
                        <textarea name="value3" value = {value3} onChange = { this.onChangeFn.bind(this) }></textarea>
                    </div>
                )
            }
 
            // 方法
            onChangeFn(e){
                // 获取数据
                let value = e.target.value
                let name = e.target.name
                
                // 更新数据
                this.setState({
                    [name]:value
                })
            }
        }
 
        ReactDOM.render(<Test />,document.querySelector('#app'))
</script>

四、组件样式

语法：

① 外部引入

<link rel="stylesheet" href="路径及文件名.css">

② 行内样式

<标签名 style={ {css属性名:属性值，....，css属性名n:属性值n} }></标签名>

 

 

注：React 中添加 class 通过 className

<p className = {'aa'}>22</p>

 

五、ref标记

语法;

<标签 ref="标识"></标签名>

this.refs.标识   使用该语法获取DOM元素

 

六、组件通信

① 父传子

语法

父在调用子组件上传递数据

子通过this.props.键获取数据

 

例子

 

② 子传父

语法

父定义普通方法接受数据

子调用普通方法传递数据

 

例子

<script type="text/babel">
            class Test1 extends React.Component{
                constructor(props){
                    super(props)
 
                    // 更改 this 指向
                    this.sendData = this.sendData.bind(this)
 
                    this.state = {
                        msg :''
                    }
                }
 
                render(){
                    return (
                        <div>
                            <p ref={'test'}>Test1</p>
                            {/* 传递方法 */}
                            <Test2 sendData = {this.sendData}/>
                        </div>
                    )
                }
                // 方法
                // 接收数据
                sendData(data){
                    console.log('子数据',data);
 
                    // 更改数据
                    this.setState({
                        msg : data
                    })
                }
            }
 
            class Test2 extends React.Component{
                constructor(props){
                    super(props)
                    this.state = {
                        msg:'5566'
                    }
                }
                componentDidMount(){
                    // 传递数据
                    this.props.sendData(this.state.msg)
                }
                render(){
                    return (
                        <div>
                            <p ref={'test'}>Test2</p>
                        </div>
                    )
                }
            }
 
            // 页面加载
            ReactDOM.render(<Test1 />,document.querySelector('#app'))
</script>

③ 非父子

语法

父在调用n个子组件上传递数据（公共父）

子通过this.props.键获取数据

 

例子

<script type="text/babel">
        //定义公共父类
        class Test extends React.Component {
            constructor(props) {
                super(props)
 
                this.state = {
                    age:15
                }
            }
 
            render() {
                return (
                    <div>
                        <p ref={'test'}>Test0</p>
                        {/* 传递数据 */}
                        <Test1 sendAge = {this.state.age}/>
                        <Test2 sendAge = {this.state.age}/>
                    </div>
                )
            }
            
        }
 
        class Test1 extends React.Component {
            constructor(props) {
                super(props)
 
                this.state = {
                    msg: ''
                }
            }
 
            render() {
                return (
                    <div>
                        <p ref={'test1'}>Test1</p>
                        {/* 接受使用数据 */}
                        <p>{this.props.sendAge}</p>
                    </div>
                )
            }
        }
 
        class Test2 extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    msg: '5566'
                }
            }
            render() {
                return (
                    <div>
                        <p ref={'test2'}>Test2</p>
                        {/* 接受使用数据 */}
                        <p>{this.props.sendAge}</p>
                    </div>
                )
            }
        }
 
        // 页面加载
        ReactDOM.render(<Test />, document.querySelector('#app'))
</script>