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 中的父子组件 兄弟组件传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。