React同级组件传值

    

在React中同级组件本身是没有任何关联的,要想有联系只能通过共同的父组件传值,一个子组件将数据传递到父组件中,父组件接收值再传入另一个子组件中

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="box"></div>

<script type="text/babel">

//子组件向父组件传值,父组件接收再传递给另一个子组件

class Childone extends React.Component{

constructor(props){

super(props);

this.state={color:"lightblue"}

}

handlecolor(){

this.props.fn("red");

//在触发方法中通过props添加一个新的fn方法,并且将颜色参数red传入父组件

this.setState({color:"red"});

}

render(){

return(

<div>

<h4 style={{color:this.state.color}}>我是第一个子组件</h4>

<button onClick={this.handlecolor.bind(this)}>改变第二个子组件颜色</button>

//给第一个子组件绑定一个方法,点击就触发,注意要绑定this

</div>

)

}

}

class Childtwo extends React.Component{

constructor(props){

super(props);

}

render(props){

return(

<h4 style={{color:this.props.co}}>我是第二个子组件</h4>

//利用prop属性从外界即父组件获取参数,不能用state,state是内部使用的

)

}

}

class Parents extends React.Component{

constructor(props){

super(props);

this.state={childtwocolor:"lightblue"};

}

change(color) {

this.setState({childtwocolor: color});

}

render(props) {

return (

<div>

<Childone fn={(color)=>{this.change(color)}}></Childone>

//第一个子组件的方法fn,将参数red传入函数change中,更新父组件本身的颜色childtwocolor

<Childtwo co={this.state.childtwocolor}></Childtwo>

//第二个子组件获取父组件本身的颜色,当父组件颜色更新时,它也会随之更新

</div>

)

}

}

ReactDOM.render(

<Parents />,

document.getElementById(‘box‘)

);

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/toMe-studio/p/11391996.html

时间: 2024-10-09 08:31:16

React同级组件传值的相关文章

react父子组件传值

react均是以组件构成,那父子组件传值就很重要了 父组件传值给子组件,不仅可以传值,传事件,还可以传实例 1.父组件传值给子组件 传值 父组件: import React from 'react'; import Children from './Children'; class Father extends React.Component { constructor(props) { super(props); this.state = { msg:'父组件的msg' }; } render

vue 父子组件、兄弟组件传值

(一)父组件给子组件传值,关键字:props 父组件: <template> <div> <h1>父组件</h1> <!-- 引入子组件 --> <child :sendMsg="fatherMsg"></child> </div> </template> <script> import child from '@/components/child' export d

React学习笔记(三) 组件传值

组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',] } }, render : function(){ return ( <div> &

react基础总结篇1,定义组件实现父子组件传值

前端时间学习了vue,这几天开始入手react了. react项目搭建起来之后,我们一定会定义很多个组件.同样的也会涉及到父子组件的传值.今天来整理一下这个知识. 1,定义子组件步骤 1,引入react. import React,{Component} from 'react'; import './style.less'; 2,写组件并export default导出去用到了es6中的calss语法,提前说一下,this.props.content用来接收父组件中content的值,this

vue 和react中子组件分别如何向父组件传值

vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='postData'>向父组件传值:点击我</p>{{result?'开':'关'}}</div>`, props:["result"], data(){ return{ message:'从子组件传过来的数据' } }, methods:{ postData(){

react组件传值

父组件向子组件传值 父组件通过属性进行传递,子组件通过props获取 //父组件class CommentList extends Component{ render(){ return( <div> <Comment comment={information}/> </div> ) }}//子组件class Comment extends Component{ render(){ return( <div> <span>{this.props.

深入理解React组件传值(组合和继承)

在文章之前,先把这句话读三遍 Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式.注意:组件可以接受任意 props,包括基本数据类型,React 元素以及函数. 来源于React中文文档,组合和继承的一句话 其实这句话之前看过很多遍,主要还是应用于数据获取上. 在完全理解这句话之前,在写子组件改变兄弟子组件的状态上,没有头绪,同事上午跟我讲解了,我自己再把代码重新写一遍就认识到了,我完全忽略了组件传函数的方法,解锁这个方法以后,再写代码如同打开了一扇大门. 下面来看例子: 以

React 组件传值 父传递儿子

10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(props){ return <div> 我是以函数的形式创建的组件 <p> {props.name}</p> </div> } // 以类的形式创建组件 这一种传递参数要使用 this 它是挂载到实例上的 export class Web2 extends Rea

十八、React react-router4.x中:实现路由模块化、以及嵌套路由父子组件传值

一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start [路由模块化实例]https://reacttraining.com/react-router/web/example/route-config 2.路由模块化:实现代码 其它代码参考:十七:https://blog.csdn.net/u010132177/article/details/1033