组建通信——父传子
方法一
父组件
//App.js
import React, {Component} from 'react';
import {Rfc, Rcc} from './component/index'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
step: 1
}
}
render() {
return (
<div>
<Rfc title='无状态组件' />
<Rcc title='有状态组件' getSon={this.getSon}/>
</div>
)
}
}
无状态子组件接受传值
//Rfc.js
import React from 'react';
export default function Rfc(props) {
let str='无状态组件'
return (
<div>{props.title}</div>
)
}
有状态组件传值
//Rcc.js
import React, {Component} from 'react';
export default class Rcc extends Component {
render() {
return (
<div>
{this.props.title}
</div>
)
}
}
方法二
有状态组件
//Rcc.js
import React, {Component} from 'react';
export default class Rcc extends Component {
constructor(props) {
super(props);
this.state={
title:props.title
}
}
render() {
//解构
const {title}=this.state
return (
<div>
{title}
</div>
)
}
}
方法三
父组件
//App.js
import React, {Component} from 'react';
import {Rfc, Rcc} from './component/index'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
step: 1
}
}
render() {
return (
<div>
<Rfc title='无状态组件'>组件之间传递数据</Rfc>
<Rcc title='有状态组件' getSon={this.getSon}>组件之间传递数据</Rcc>
</div>
)
}
getSon(data) {
console.log(data)
}
}
无状态子组件
//Rfc.js
import React from 'react';
export default function Rfc(props) {
let str='无状态组件'
return (
<div>{props.title}----{props.children}</div>
)
}
有状态子组件
//Rcc.js
import React, {Component} from 'react';
export default class Rcc extends Component {
constructor(props) {
super(props);
this.state={
title:props.title
}
}
render() {
//解构
const {title}=this.state
return (
<div>
{title}----{this.props.chi}
</div>
)
}
}
组建通信——子传父
有状态子组件
//Rcc.js
import React, {Component} from 'react';
export default class Rcc extends Component {
constructor(props) {
super(props);
this.state = {
title: props.title
}
}
render() {
//解构
const {title} = this.state
return (
<div>
{title}----{this.props.children}
<button onClick={this.handleSetData}>给父组件传值</button>
</div>
)
}
handleSetData = () => {
this.props.getSon('子组件的数据')
}
}
父组件
import React, {Component} from 'react';
import {Rfc, Rcc} from './component/index'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
step: 1
}
}
render() {
return (
<div>
<Rfc title='无状态组件'>组件之间传递数据</Rfc>
<Rcc title='有状态组件' getSon={this.getSon}>组件之间传递数据</Rcc>
</div>
)
}
getSon(data) {
console.log(data)
}
}
兄弟之间传值
父组件
//App.js
import React, {Component} from 'react';
import {Rfc, Rcc,Child1,Child2} from './component/index'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
step: 1
}
}
render() {
return (
<div>
{/*<Rfc title='无状态组件'>组件之间传递数据</Rfc>
<Rcc title='有状态组件' getSon={this.getSon}>组件之间传递数据</Rcc>*/}
<Child1 count={this.state.count}></Child1>
<Child2 addCount={this.addCount} step={this.state.step}></Child2>
</div>
)
}
//
// getSon(data) {
// console.log(data)
// }
addCount = (step) => {
this.setState((state) => {
return {
count: state.count += step
}
})
}
}
第一个兄弟组件
//Child1
import React, {Component} from 'react';
export default class Child1 extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>子组件1---{this.props.count}</div>
)
}
}
第二个兄弟组件
//Child2.js
import React, {Component} from 'react';
export default class Child2 extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>子组件2- <button onClick={this.handleClick}>+</button></div>
)
}
handleClick = () => {
const {addCount, step} = this.props
addCount(step)
}
}
context组件传值(爷传孙)
import React, {Component} from 'react';
import ReactDom from 'react-dom'
const {Provider, Consumer} = React.createContext()
class Grandpa extends Component {
state = {
msg: '爷爷给孙子发糖'
}
render() {
return (
<div>
<Provider value={this.state.msg}>
<Parent></Parent>
</Provider>
</div>
)
}
}
class Parent extends Component {
render() {
return (
<div>
parent
<Son></Son>
</div>
)
}
}
class Son extends Component {
render() {
return (
<div>
孙子组件---{this.props.msg}
<Consumer>
{
data => {
return <span>{data}</span>
}
}
</Consumer>
</div>
)
}
}
ReactDom.render(
<Grandpa/>,
document.getElementById('root')
)
context模块化
代码
import React, {Component} from 'react';
import Son from'./son'
export default class index extends Component {
render() {
return (
<div>
parent
<Son></Son>
</div>
)
}
}
parent 下面的文件son.js
import React, {Component} from 'react';
import {Consumer} from'../../CreateContext'
export default class son extends Component {
render() {
return (
<div>
孙子组件---{this.props.msg}
<Consumer>
{
data => {
return <span>{data}</span>
}
}
</Consumer>
</div>
)
}
}
App.js
import React, {Component} from 'react';
import Parent from './component/Parent/index'
import {Provider} from "./CreateContext";
export default class App extends Component{
state = {
msg: '爷爷给孙子发糖'
}
render() {
return (
<div>
<Provider value={this.state.msg}>
<Parent></Parent>
</Provider>
</div>
)
}
}