【React】从入坑到跑路：组件化

古城微笑少年丶 2022-11-29 13:20 158阅读 0赞

## 内容 ##

> 父组件向子组件传值  
> 子组件向父组件传值  
> React 事件  
> React 条件渲染  
> React 列表渲染

## 1. 父组件向子组件传值 ##

父组件传递给子组件数据，单向流动，不能子传递给父。props的传值，可以是任意的类型。

**Props**可以设置默认值：`组件名`.defaultProps = \{ key:”React”，msg：“cool” \}

示例（父组件改变子组件的显示/隐藏）：

class FatherCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { 
                isShow:true
            }
            this.myClick = this.myClick.bind(this)  //改变函数this指向（每个函数都要写），也可把函数定义成箭头函数（可不写）
        }
        render(){ 
            return(
                <div>
                    <h1>我是父组件，可控制子组件</h1>
                    <button onClick={ this.myClick}>点击显示子组件</button>
                    <SonCom isShow={ this.state.isShow}/> 
                </div>
            )
        }
        myClick(){ 
            this.setState({ 
               isShow:!this.state.isShow
            })
        }
    }
    
    class SonCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { } //注意此处接收isShow再调用无法操控
        }
        render(){ 
            let isClass = '';
            isClass = this.props.isShow ? ' active' : '';
            return(
                <div className={ 'current' + isClass}>
                    <h1>我出来了</h1>
                </div>
            )
        }
    }
    
    ReactDom.render(
        <FatherCom/>,
        document.querySelector('#root')
    )

## 2. 子组件向父组件传值 ##

子向父传值，父组件通过为子组件传递函数，子组件通过props接收到函数，并操作函数。

示例（孩子改变父亲文字大小）：

class FatherCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { 
                myStyle:{ 
                    fontSize:15
                }
            }
        }
        render(){ 
            return(
                <div>
                    <p style={ this.state.myStyle}>我的字体大小受子组件控制</p>
                    <SonCom setSize = { this.setSize}/>
                </div>
            )
        }
        // 改变字体大小的函数，为了不单独绑定this，此处用箭头函数
        setSize = (data)=>{ 
            this.setState({ 
                myStyle:{  // 要想改变数据，必须得一层一层往下找到数据再更改
                    fontSize:this.state.myStyle.fontSize + data
                }
            })
        }
    }
    class SonCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { }
            
        }
        // 此处直接把父组件函数写在事件后。也可写在函数中，事件再调用函数
        render(){ 
            return(
                <div>
                    <button onClick={ ()=>{ this.props.setSize(5)}}>点击改变父组件字体大小</button>
                </div>
            )
        }
    }
    
    ReactDom.render(
        <FatherCom/>,
        document.querySelector('#root')
    )

## 3. React 事件 ##

`特点`：  
1：react事件，绑定事件的命名，`驼峰命名法`。  
2：\{\},`传入1个函数`，而不是字符串。  
3：`React` 返回的事件对象是`代理的原生的事件对象`，如果想要查看事件对象的具体值，必须提前输出事件对象的属性。

示例（阻止默认行为，多个参数传递）：

class MyCom extends React.Component{ 
        constructor(props){ 
            super(props);
            this.state = { }
        }
        render(){ 
            return(
                <div>
                    <form action="http://www.baidu.com">
                        <button onClick={ this.preventThis}>点击跳转</button>
                    </form>
                    <button onClick={ (e)=>{ this.clickEvent(1,2,3,e)}}>传递多个参数</button>
                </div>
            )
        }
        preventThis(e){ 
            // 此处的事件对象是React 代理后的事件对象，所以无法用 return false 进行阻止默认行为
            e.preventDefault()
        }
        clickEvent(a,b,c,e){ 
            console.log(...arguments)  // 1 2 3
            console.log(e) // 事件对象
        }
    }
    
    ReactDom.render(
        <MyCom/>,
        document.querySelector('#root')
    )

注意：原生，阻止默认行为时，可以直接返回 return false；React中，阻止默认必须 e.preventDefault()；事件还有很多，此处以 onClick 为例

## 4. React 条件渲染 ##

React中条件渲染即为 JavaScript中，条件运算，如if…else…三元运算符等。

`方式`：  
1：直接通过条件运算 `返回要渲染的JSX对象`。  
2：通过条件运算`得出jsx对象`，再 `将JSX对象渲染到模板中`。

示例：

function Isok(){ 
        return(
            <h1>这是OK的</h1>
        )
    }
    function Isno(){ 
        return(
            <h1>这是不允许的</h1>
        )
    }
    class IsContent extends React.Component{ 
        constructor(props){ 
            super(props)
            this.state = { 
                myThink:true
            }
        }
        render(){ 
        // if(this.state.myThink){ 
        // return <Isok/>
        // }else{ 
        // return <Isno/>
        // }
             return this.state.myThink ? <Isok/> : <Isno/>  // 所有的条件渲染规则均可自己定义，只要合乎 JSX 语法
        }
    }
    
    ReactDom.render(
        <IsContent/>,
        document.querySelector('#root')
    )

## 5. React 列表渲染 ##

列表渲染等同于 Vue 的 v-for ；React中 将列表内容拼装成数组放置到模板中，将数据拼装成数组的JSX对象进行渲染。

常使用数组的map方法，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，在将数组渲染到模板中；Key值需要放置到每一项中。

示例：

// 组件拼接(若要写事件，可以改用动态组件)
    function ListCom(props){ 
        return(
            <li key={ props.index}>
                    <h3>props.data.id</h3>
                    <a href="http">props.data.name</a>
            </li>
        )
    }
    class List extends React.Component{ 
        constructor(props){ 
            super(props)
            this.state = { 
                hero:[
                    { 
                        id:1,
                        name:'压缩'
                    },
                    { 
                        id:2,
                        name:'永恩'
                    },
                    { 
                        id:3,
                        name:'阿卡丽'
                    }
                ]
            }
        }
        render(){  // 此处展示了多种渲染方式:1.直接在return中拼接；2.外部拼接；3.组件拼接
            // let ListArr = [];
            // ListArr = this.state.hero.map((item,index)=>{ 
            // return(
            // <li key={index} onClick={()=>{this.click1(item.id,item.name)}}>
            // <h3>item.id</h3>
            // <a href="http">item.name</a>
            // </li>
            // )
            // })
            /* --------------------------------------------------------------------------- */
            return(
                <div>
                    <h1>渲染出各个英雄</h1>
                    <ul>
                     { /* --------------------------------内部拼接------------------------------------------- */}
                       { /* { this.state.hero.map((item,index)=>{ return( <li key={index} onClick={()=>{this.click1(item.id,item.name)}}> <h3>item.id</h3> <a href="http">item.name</a> </li> ) }) } */}
                    { /* --------------------------------外部拼接------------------------------------------- */}
                        { /* {ListArr} */}
                     { /* --------------------------------组件拼接（注意此时的key值写在组件上）---------------------------------- */}
                     { 
                         this.state.hero.map((item,index)=>{ 
                            return(
                               <ListCom key={ index} data={ item}/>
                            )
                        })
                     }
                    </ul>
                </div>
            )
        }
        click1 = (id,name)=>{ 
            alert(id + name)
        }
    }
    
    ReactDom.render(
        <List/>,
        document.querySelector('#root')
    )

**注意**：之所以需要对数组操作，是因为 React 只接受数组格式的渲染。

### 奥利个i ###