react组件通信-逆战1913

父组件向子组件通信

父组件：
import React,{ Component } from "react"; import Childre from"./Childre.js";export default class App extends Component{render(){return(<div><Childre title = "今年身体健康2020" /></div>)} }子组件：import React from "react";const Childre = (props) => {return(<h2>{ props.title }</h2>) } export default Childre;

子组件向父组件通信

父组件：

import React,{ Component } from "react";
import Childre from "./Childre.js";export default class App extends Component{callback(msg){console.log(msg);}render(){return(<div><Childre callback = { this.callback.bind(this) } /></div>)}
}

子组件：

import React from "react";const Childre= (props) => {const cb = (msg) => {return () => {props.callback(msg)}}return(<div><button onClick = { cb("2020祝大家身体健康") }>点击</button></div>)
}

export default Childre;

跨组件通信：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Grandsson extends Component {static contextTypes = {color: PropTypes.string,}static propTypes = {value: PropTypes.string,}render() {const { value } = this.props;return (<li style={{ background: this.context.color }}><span>{value}</span></li>);}
}
export default Grandsson;import Grandsson from './Grandsson';
class List extends Component {static childContextTypes = {color: PropTypes.string,}static propTypes = {list: PropTypes.array,}getChildContext() {return {color: 'red',};}render() {const { list } = this.props;return (<div><ul>{list.map((entry, index) =><Grandsson key={`list-${index}`} value={entry.text} />,)}</ul></div>);}
}
export default List;import React, { Component } from 'react';
import List from './components/List';
const list = [{text: '2020身体健康',},{text: '2020恭喜发财',},
];
export default class App extends Component {render() {return (<div><Listlist={list}/></div>);}
}

react组件通信-逆战1913相关推荐

React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...
React组件通信传值父传子子传父兄弟组件传值
一.父组件传递子组件在父组件中引入子组件,将父组件的state值放到子组件标签中传递,在子组件中用this.props.传值名称,接收父组件代码: import React, { Componen ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...
React组件（进阶--生命周期）
目录一.生命周期 - 概述二.生命周期 - 挂载阶段三.生命周期 - 更新阶段四.生命周期 - 卸载阶段文章推荐: 1.JSX基础(入门) 2.React组件(入门) 3.React组件动状 ...
[react] react组件间的通信有哪些？
[react] react组件间的通信有哪些? Props Context ref:通过Ref获取组建的实例,在通过实例拿到组件的属性值或者方法的回调第三方的,Redux是基于Conext基础上的库 ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...

react组件通信-逆战1913

父组件向子组件通信

子组件向父组件通信

跨组件通信：

react组件通信-逆战1913相关推荐

最新文章

热门文章