Home,js

import React, {Component} from 'react'; import News from "./News"; class Home extends Component {constructor(props) {super(props);this.state={text:'我是默認值'}}dataFun=(text)=>{console.log(text)this.setState({text})}render() {return (<div>home---<p>{this.state.text}</p><News name="你好" fufun={this.dataFun}/></div>);} }export default Home;

news,js

import React, {Component} from 'react'; import PropTypes from 'prop-types'; import PubSub from 'pubsub.js' class News extends Component {constructor(props) {super(props);this.state={num:1111,ziText:"我是子組件的值"}}fun(){this.setState({num:222})}pubsubb(){console.log(1)PubSub.publish("evt",this.state.num)console.log(1)}render() {return (<div>News-----{this.props.name}-----{this.state.num}<button onClick={this.fun.bind(this)}>哈哈</button><button onClick={this.props.fufun.bind(this,this.state.ziText)}>發送</button><button onClick={this.pubsubb.bind(this)}>點我進行同級傳值</button></div>);} }News.propTypes = {};export default News;

app.js

import React from 'react';import './App.css'; import Home from './components/Home.js' function App() {return (<div className="App">你好<Home></Home></div>); }export default App;

phone.js

import React, {Component} from 'react'; import PubSub from 'pubsub.js' class Phone extends Component {constructor(props) {super(props);PubSub.subscribe("evt",(msg,data)=>{console.log("phone"+data)})}render() {return (<div>phone</div>);} }export default Phone;

?

?

?

?

總結

以上是生活随笔為你收集整理的前端学习（2309）：react之同级传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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