react爷爷组件件传递给孙⼦组件爷爷组件
import React, { Component } from "react";
import "./App.css";
import TestHanderClick from "./components/TestHanderClick";
import proptypeskey from "prop-types";
export class App extends Component {
// 也是⼈家提供的，不可以改变传递给孙⼦组件的类型(必须写)
// 爷爷组件传递给孙⼦组件，依赖于  prop-types;(验证参数的格式)
static childContextTypes = {
title: proptypeskey.string,
};
/
/ getChildContext是⼈家提供的，设置穿度的内容(必须写)
getChildContext() {
return {
title: "营业员==>给孙⼦的",
};
}
render() {
return (
<div className="App">
{/* ⽗组件传递给⼦组件的值 */}
<TestHanderClick></TestHanderClick>
</div>
);
}
}
export default App;
⽗亲组件（⽗亲组件啥⼦都不⽤⼲）
import React, { Component } from "react";
import "./base.css";
import SuoZi from "./SuoZi";
// ⽗组件
export class TestHanderClick extends Component {
/
/  static defaultProps是默认的写法，⼈家规定这样写的，你的默认值
static defaultProps = {
bg: "pink",
wi: "400px",
he: "200px",
};
render() {
return (
// 使⽤值
<div
style={{
background: this.props.bg,
width: this.props.wi,
height: this.props.he,
}}
>
react组件之间通信<SuoZi></SuoZi>
</div>
);
}
}
export default TestHanderClick;
孙⼦组件
import React, { Component } from "react";
// 引⼊验证格式类型的插件
import proptypeskey from "prop-types";
export class SuoZi extends Component {
// 也是⼈家提供的，不可以改变(必须写)
static contextTypes = {
title: proptypeskey.string,
};
render() {
return (
<div>
{/* 获取值 */}
<p>爷爷=={t.title} </p>      </div>
);
}
}
export default SuoZi;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。