前端学习（2233）：react的子传父数据传递

import React from 'react';
import ReactDOM from 'react-dom';import './App.css'
class ParentCom extends React.Component {constructor(props) {super(props)this.state = {childData: null}}render() {return ( <div ><h1 > 子元素传递给父级 { this.state.childData } < /h1> <ChildCom setChildData = { this.setChildData }/ > < /div >)}setChildData = (data) => {this.setState({childData: data})}}class ChildCom extends React.Component {constructor(props) {super(props)this.state = {msg: "geyao"}}render() {let sendData = nullreturn ( <div ><button onClick = { this.sendData } > 传递helloworld给父元素 < /button>  <button onClick = {() => { this.props.setChildData('直接调用') } } > 传递helloworld给父元素 < /button> </div >)}sendData = () => {console.log(this.state.msg)console.log(this.props.setChildData(this.state.msg))}}//console.log("这是渲染函数")
ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

运行结果

前端学习（2233）：react的子传父数据传递相关推荐

react（子传父、父传子）
目录 1. 父传子数组/对象的两种写法 2. 子传父: 3. 生成唯一id的库: 4. 对接收的组件进行验证 1. 父传子数组/对象的两种写法 function App() {const ob ...
react 通信-子传父
父组件中定义一个回调函数,由子组件来调用执行.用this.props.[父组件自定义回调函数名称]()调用 /** @Author: Spring* @LastEditors: Aidam_Bo* @ ...
前端学习（2308）：react之子传父
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
3.vue3.2的父传子defineProps，子传父emits以及ref
1.父传子 <template><div class="container"><!-- 传递数据这里传了一个string 和一个list --&g ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
React (三) 修改props，React父传子、子传父、this绑定
Props介绍与应用什么是 props 如何使用父传子函数组件类组件默认值子传父修改 props 事件监听 this 绑定直接在 jsx 元素上进行绑定(不推荐) 箭头函数(推荐) 直 ...
React父传子、子传父
父子传值父传子将子组件导入父组件并使用,在注册的子组件标签上通过自定义属性接收要传递的变量或者方法,在父组件的constructor(props)可以通过props属性接收父组件传递过来的方法 / ...
react 三种通信方式（父传子、子传父、兄弟传值）
react有三种通信方式:一.父传子,二.字传父,三.兄弟之间传值一.父组件向子组件传值父组件通过属性的方式传递参数,子组件通过props来接收父组件传递过来的参数 React中是单向数据流,数据 ...
【vue3.0学习】父传子子传父
父传子 <template><div id="app"><h1>父组件</h1><p>{{ money }}</p ...

前端学习（2233）：react的子传父数据传递

前端学习（2233）：react的子传父数据传递相关推荐

最新文章

热门文章