React 中的父子组件兄弟组件传值

1.父组件向子组件传值

1.1 我们要明白父组件 --> 子组件是通过props这个属性来传值的

父组件

import React from 'react';
import './App.css';
//引入子组件
import Nav from "./components/Nav";
class App extends React.Component{render () {return (<div className="App"><Nav title={'父亲传递的值'}/>  {/*父传子*/}</div>);}}
export default App;

子组件

import React from "react";class Nav extends React.Component {constructor(props) {super(props);  ///接收和传递数据  传递的数据会在props里this.state = {  //保持组件的状态title: ''}}render() {return (<div><div>{this.state.title}</div></div>)}//完成挂载componentDidMount() {this.setState({title: this.props.title})}
}export default Nav;

在页面中显示
此时render执行了两次, 一次是默认执行,一次是在完成挂载之后, 调用this.setState 又重新执行render 方法

2.子组件向父组件传值（通过回调函数）

在这里我们分为4个步骤
2.1、在父组件中声明一个函数，用于接收子组件的传值
2.2、通过组件属性的方法，把函数传递给子组件

App.js

import React from 'react';
import './App.css';//引入组件
import Nav from "./components/Nav";
class App extends React.Component{constructor(props){super(props);}//1.在父组件中声明一个函数，用于接收子组件的传值message(msg){// 通过形参接受到子组件的值并打印到控制台console.log(msg)}render () {return (<div className="App">{/* 在这里声明一个sendMsg属性，通过组件属性的方法，把函数传递给子组件 */}<Nav title={'父亲'}  sendMsg = {this.message}/>{/*子传父  通过回调函数*/}</div>);}
}
export default App;

2.3、在子组件中通过props属性调用父组件的函数，并通过参数传值

import React from "react";class Nav extends React.Component {render() {return (<div><button onClick={() => {{/* 在子组件中通过props属性调用父组件的函数，并通过参数传值*/}this.props.sendMsg('子组件传递的值')}}>点击</button></div>)}
}export default Nav;

2.4、在父组件中的函数通过形参接收子组件的传值
点击按钮,在控制台打印出效果

3.兄弟组件传值

兄弟组件传值实际上是间接的通过第三方来实现传值，举例，第一个儿子把值传给父亲，父亲在把这个值传给第二个儿子，这样就实现了兄弟组件传值

父组件代码

import React from 'react';
import './App.css';//子组件1
import Input from "./components/Input";
//子组件2
import Nav from "./components/Nav";class App extends React.Component {constructor(props) {super(props);// 先给 msg 一个空值this.state = {msg: ''}}// 声明一个方法用来接收Son1传来的值inputVal=(msg)=> {// 把Son1传来的值给放在父组件中this.setState({msg:msg});};render() {return (<div className="App">{/*one:子组件1 向父组件传值 引入子组件 拿到上边声明的方法*/}<Input sendVal={this.inputVal}/>{/*two: 父组件向子组件传值 引入第二个子组件 并声明一个属性iptVal  把Son1传来的值传过去*/}<Nav iptVal = {this.state.msg}/><div>{this.state.msg}</div></div>);}}export default App;

子组件1代码

import React from "react";class Input extends React.Component {constructor(props) {super(props);}render() {return (<div>{/*给input 事件 把输入框的值 传给父组件   sendVal*/}<input type="text"ref="input"onInput={()=>{this.props.sendVal(this.refs.input.value)}}/></div>)}
}export default Input;

子组件2代码

import React from "react";class Nav extends React.Component {constructor(props) {super(props);this.state={iptVal:''}}render() {return (<div><div>{this.state.iptVal}</div></div>)}componentDidMount() {this.setState({//把从子组件传递过来的值 赋给 inputiptVal:this.props.iptVal})}
}export default Nav;

这样就实现了简单的兄弟组件传值

React 中的父子组件兄弟组件传值相关推荐

React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
[react] 说说你对“在react中，一切都是组件”的理解
[react] 说说你对"在react中,一切都是组件"的理解 React采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX的语法声明组件的调用 React的虚拟DO ...
vue父子，兄弟组件传值
一.父子组件通讯子组件给父组件传值 1.子组件页面 childA <template><div class="childA"><div>这里是 ...
【Vue2】父子、兄弟组件通信遇到的问题汇总
目录 0.了解子组件与父组件的关系 1.父组件调用子组件内容[一对一] 1.1 父组件调用子组件的methods 2.子组件调用父组件内容[一对一] 2.1 子组件调用父组件的methods 2.2 ...
VUE3+TS（父子、兄弟组件通信）
目录父传子值.方法(子调用父值.方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值.方法) 兄弟(任意组件)通信引入Mitt来完成任意组件通信父传子值.方法(子调用父值.方法) 1.统 ...
在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
html与js项目引入react框架之父子或子子传值
一.react的引入需要引入三个文件 1.react.js https://unpkg.com/react@17/umd/react.development.js https://unpkg.com ...
七十六、React中的TodoList和拆分组件，组件之间的传值
2020/11/18. 周三.今天又是奋斗的一天. @Author:Runsen 这东西已经有很多大佬们写过了,就不多班门弄斧了.主要使用这个例子入门 React ,包括 state.props.组件 ...
vue $emit $on 非父子非兄弟组件传值
bus.js 放置src根目录 import Vue from 'vue' export default new Vue() test1.vue 传值组件 <template> & ...

React 中的父子组件兄弟组件传值

1.父组件向子组件传值

2.子组件向父组件传值（通过回调函数）

3.兄弟组件传值

React 中的父子组件兄弟组件传值相关推荐

最新文章

热门文章

React 中的父子组件 兄弟组件传值

1.父组件向子组件传值

2.子组件向父组件传值（通过回调函数）

3.兄弟组件传值

React 中的父子组件 兄弟组件传值相关推荐

最新文章

热门文章

React 中的父子组件兄弟组件传值

React 中的父子组件兄弟组件传值相关推荐