React基础入门

React基础教程(组件传参)

关于react组件之间传参的几种方式

1，在挂载的地方给组件传参
　　ReactDOM.rander(< a name=‘item’ age={16}/>,app) 在渲染的时候，直接给挂载的组件传参。

2，父子传参
　　父子传参可以用props和ref两种方式，1，props方式传参，父组件通过改变自己的参数并且通过props将状态传递给子组件，并在子组件中显示。2，通过ref传参，这种方式是通过子组件自己的方法改变自己的状态后，父组件通过触发子组件的方法更改参数。

3，子父传参
　　子组件通过触发父组件的方法来改变父组件的状态，

4，兄弟传参
　　兄弟传参有两种，一种是通过状态提升，通过改变公有组件的状态进而改变子组件的状态，另一种是通过ref传参的方式，改变原有的状态。

5，远亲间的传参
　　通过redux协助传参，一般会适用与项目间的交互较多时使用，并没有什么互动时若使用redux反而会增加项目的复杂度，当不知道要不要使用redux的时候就不要使用。

父传子(举个栗子)

export default class App extends Component {
    constructor(props){
        super(props)
        this.state={
          color:"red",
        }
    }
    setColor=(v)=>this.setState({color:v})；//v就是你要传递的参数
    render() {
        return (
            <div>
                //通过button点击获取父组件中的值传递给子组件
                <h3 style={{color:this.state.color}}>父子传参</h3>
                <Ctrl setColor={this.setColor}></Ctrl> //Ctrl是你定义的一个组件，通过组件进行父子传参
            </div>
        )
    }
}

然后定义一个方法

function Ctrl(props){
    return (
        <div>
            <button onClick={()=>props.setColor('red')}>红</button>
            <button onClick={()=>props.setColor('green')}>绿</button>
            <button onClick={()=>props.setColor('blue')}>蓝</button>
            <button onClick={()=>props.setColor('pink')}>粉</button>
        </div>
    )
}

效果就是这样，当你点击按钮时，按钮上的值也会同时把值传递给子组件，从而改变子组件的颜色