react父子组件传值

父子组件传值

   父组件==>子组件

   props:   

    <Header run={this.run} ref="header" msg="我是首页的头部组件" active="home"/>

  子组件:

    我是{this.props.msg}

  父组件代码:

    

import React from 'react';
import Header from './Header';
import '../assets/css/index.css';
class Home extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
            mes: "我是一个home组件",
            title: "我是home的标题",
            redText: "我是红色字体",
            lable: '测试label for属性绑定需要注意换成htmlFor',
            style: {
                color: "yellow",
                "fontSize": "56px" 
            }
        }
    }
    run =  ()=>{
        debugger;
        alert("run方法");
    }
    hanlederClick(e){
        alert(this.refs.header.state.msg);
    }
    render() {

        return (
            <div>
                <Header run={this.run} ref="header" msg="我是首页的头部组件" active="home"/>

                <div>
                    <button onClick={this.hanlederClick.bind(this)}>获取当前子组件的msg</button>
                </div>
               {/* <h1 onClick={this.hanlederClick.bind(this)}> {this.state.title}</h1>
                <hr/>
                <p className="red"> {this.state.redText} </p>
                <br/>
                <label htmlFor="name"></label>
                <input type="text" defaultValue={this.state.lable}/>

                <br/>
                <h3>style</h3>
                <hr/>
                 <h5 style={{color: 'green','fontSize': '28px'}}>style样式绑定</h5> 
                 <p style={this.state.style}>this.state.style样式绑定</p>  */}
            </div>
        );
    }
}
export default Home;

子组件 代码

import React from 'react';
import '../assets/css/header.css';
class Header extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            msg: "点击我的是傻逼"
        }
    }
    render() {
        let navs = [
             <li active="home"><a>首页</a></li>,
             <li active="news"><a>新闻</a></li>,
             <li active="user"><a>用户</a></li>
        ];
       let active = this.props.active;
  

        return (
            <div className="header">
                <div>
                    <ul>
                        <li>
                            <a>首页</a>
                        </li>
                        <li>
                            <a>新闻</a>
                        </li>
                        <li>
                            <a>
                                用户
                            </a>
                        </li>

                          <li>
                            <button onClick={this.props.run}>调用父组件的run方法</button>
                        </li>
                    </ul>
                </div>
           
                <div className="clear-fixed">
                    我是{this.props.msg}
                </div>
            </div>

        )
    }

}


export default Header;

 

React中,父组件组件传值可以通过props来实现。父组件可以将需要传递的数据作为属性传递给组件组件通过props来接收这些数据。下面是几种常见的父子组件传值的方式: 1. 父组件通过props传递数据给组件: 父组件定义一个属性,并将需要传递的数据作为该属性的值,然后将组件引入到父组件中,并将该属性作为组件的一个属性传递进去。组件可以通过props来接收并使用这个数据。例如,父组件中定义属性`txt0`,并将它传递给组件`Child`: ```javascript <Child txt={this.state.txt0} /> ``` 组件可以通过props来接收并使用父组件传递的数据: ```javascript this.props.txt ``` 2. 父组件通过回调函数传递数据给组件: 父组件定义一个回调函数,并将该函数作为属性传递给组件组件可以通过调用这个回调函数,将需要传递的数据作为参数传递给父组件。例如,父组件中定义一个回调函数`getDatas`: ```javascript getDatas(msg){ this.setState({ mess: msg }); } ``` 然后将该函数作为属性传递给组件`Son`: ```javascript <Son getdata={this.getDatas.bind(this)}></Son> ``` 组件可以通过调用父组件传递的回调函数,并将需要传递的数据作为参数传递给它: ```javascript this.props.getdata(data); ``` 3. 父组件通过context传递数据给组件: Context是React提供的一种跨组件传递数据的机制。父组件可以通过定义一个Context,并将需要传递的数据放在Context中,然后组件可以通过访问Context来获取这些数据。具体的实现可以参考React官方文档中关于Context的介绍。 以上是React父子组件传值的几种常见方式,你可以根据具体的需求选择合适的方式来实现父子组件之间的数据传递。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React父子组件间的传值的方法](https://download.csdn.net/download/weixin_38595850/13633672)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [React教程:父子组件传值组件通信)](https://blog.csdn.net/p445098355/article/details/104519363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [React父子组件传值](https://blog.csdn.net/weixin_45817109/article/details/103628428)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值