React父传子、子传父

父子传值
父传子

将子组件导入父组件并使用,在注册的子组件标签上通过自定义属性接收要传递的变量或者方法,在父组件的constructor(props)可以通过props属性接收父组件传递过来的方法

    // 子组件
    import {Component} from 'react'
    class Child extends Component {
        // 在子类中如果要使用constructor函数就必须写super关键字
        constructor(props) {
            super()
            // props里面会包含父组件传递过来的值 接收的是自定义属性和值的键值对
            console.log(props.text) // 呼哈有
        }
    }
  // 父组件
    import {Component} from 'react'
    import Child from '子组件的文件地址'
    class Parent extends Component {
        // 定义一个react组件 render函数时必须的
        render() {
            return (
                // react组件的根元素不能有同胞元素
                // 组件的首字母必须大写
                <div>
                
                    <Child text="呼哈有"/>
                </div>
            )
        }
    }
子传父

通过父组件的自定义属性将父组件的方法或者函数传递给子组件,然后在子组件中调用该方法
需要注意的是:特别注意this指向

//父组件
import {Component} from 'react'
import Child from '子组件所在的文件地址'
class Parent extends Component {
    getData = (val) => {
        console.log(val) // 就是子组件传递过来的值
    }

    render() {
        return (
            <div>
                <Child func={this.getData}/>
            </div>
        )
    }
}
  import {Component} from 'react'
    class Child extends Component {
        // 在子类中如果要使用constructor函数就必须写super关键字
        constructor(props) {
            super()
            // props里面会包含父组件传递过来的值 接收的是自定义属性和值的键值对
        }
        setData(val) {
            this.props.func(val)
        }
        render() {
            return (
                <div>
                    <button onClick={this.setData.bind(this, "我要传递的数据")}>点击</button>
                    //也可以这样写
                    <button onClick={() => this.props.func("我要传递的数据")}>点击</button>
                </div>
            )
        }
    }
### React 子组件向组件传递数据的方法 在 React 中,子组件可以通过回调函数的方式将数据传递给组件。这种机制被称为“子传父”,其核心在于通过组件定义一个函数并将该函数作为 `prop` 传递给子组件,在子组件内部调用此函数即可完成数据的传递。 #### 方法描述 1. **组件定义回调函数** 组件需要定义一个用于接收子组件数据的回调函数,并将其作为 `props` 属性传递给子组件[^3]。例如: ```javascript class ParentComponent extends React.Component { handleChildData(data) { console.log('接收到子组件的数据:', data); // 可在此处更新状态或其他操作 } render() { return ( <div> <h1>组件</h1> {/* 将回调函数传递给子组件 */} <ChildComponent onSendData={this.handleChildData.bind(this)} /> </div> ); } } ``` 2. **子组件触发回调函数** 子组件在其逻辑中(如按钮点击事件或状态变化时),调用从组件传递过来的回调函数,并将所需数据作为参数传递回去[^4]。例如: ```javascript class ChildComponent extends React.Component { sendDataToParent() { const childData = '来自子组件的消息'; this.props.onSendData(childData); // 调用组件的回调函数并传递数据 } render() { return ( <div> <h2>子组件</h2> <button onClick={() => this.sendDataToParent()}> 向组件发送消息 </button> </div> ); } } ``` 3. **完整示例** 下面是一个完整的子组件交互示例,展示了如何实现子组件向组件传递数据的功能[^1]。 ```javascript // 组件 import React, { Component } from 'react'; class ParentComponent extends Component { constructor(props) { super(props); this.state = { messageFromChild: '' }; } updateMessage(message) { this.setState({ messageFromChild: message }); } render() { return ( <div> <h1>组件</h1> <p>{this.state.messageFromChild}</p> <ChildComponent sendMessage={this.updateMessage.bind(this)} /> </div> ); } } // 子组件 class ChildComponent extends Component { sendTextToParent() { const text = '你好,组件!'; this.props.sendMessage(text); // 调用组件的回调函数 } render() { return ( <div> <h2>子组件</h2> <button onClick={() => this.sendTextToParent()}> 发送消息至组件 </button> </div> ); } } export default ParentComponent; ``` #### 关键点总结 - 组件需提供一个回调函数并通过 `props` 传递给子组件。 - 子组件可通过调用该回调函数来通知组件某些特定的信息或事件。 - 此种设计遵循单向数据流原则,即数据总是由组件流向子组件,而反向通信则依赖于显式的回调函数[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值