React組件傳值
（一）父傳子
傳遞：在父組件中子組件的標(biāo)簽上目木，給子組件綁定一個(gè)自定義屬性纬朝，值為需要傳遞的數(shù)據(jù)
接收：在子組件內(nèi)部通過props進(jìn)行接收
- 如何限制外部數(shù)據(jù)的類型
https://react.docschina.org/docs/typechecking-with-proptypes.html
- 安裝
prop-types
cnpm install prop-types
- 引入PorpTypes
import ProtoTypes from “prop-types” - 配置
組件名稱.propTypes = {
? 屬性名稱 : PropTypes.類型
}
- 如何定義外部數(shù)據(jù)的默認(rèn)值
組件名稱.defaultProps = {
? 屬性名稱 : 默認(rèn)值
}
詳見下面案例中的one.js
（二）子傳父
傳遞：在子組件內(nèi)部通過調(diào)用this.props.事件函數(shù)名稱來進(jìn)行傳值
接收：在父組件中子組件的標(biāo)簽上朦促，給子組件綁定一個(gè)自定義屬性痴颊，值為需要傳遞的數(shù)據(jù)
（三）非父子
手動封裝Observer(事件訂閱)
傳值的一方調(diào)用
Observer.$emit樱调，使用Observer.$on接收
- 組件傳值案例
組件傳值.png
- index.jsx
import React, { Fragment } from "react";
import One from "./components/one"
import Two from "./components/two"
class App extends React.Component {
constructor() {
super();
this.state = {
msg: "app組件",
value: ""
}
}
render() {
return (
<div className="app">
<h2>app組件</h2>
<h2>接收到子組件的值為:{this.state.value}</h2>
<One username={this.state.msg} />
<Two handle={this.handleTwo.bind(this)} />
</div>
)
}
handleTwo(value) {
this.setState({
value
})
}
}
export default App;
- one.js
import React, { Component } from "react"
import Three from "./three"
import PropTypes from "prop-types"
class One extends Component {
render() {
let { username } = this.props;
return (
<div className="One">One組件
<h2>接受到父組件的值為:{username}</h2>
<Three />
</div>
)
}
}
One.proTypes = {
username:ProTypes.string
}
One.defaultProps = {
username:"默認(rèn)值"
}
export default One
- two.js
import React, { Component } from "react"
import Observer from "../observer"
class Two extends Component {
constructor() {
super();
this.state = {
threeVal: ""
}
Observer.$on("handle", (value) => {
this.setState({
threeVal: value
})
})
}
render() {
return (
<div className="Two">
Two組件
<h2>接收到three組件的值為：{this.state.threeVal}</h2>
<button onClick={this.handleAdd.bind(this)}>點(diǎn)擊發(fā)送給父組件</button>
</div>
)
}
handleAdd() {
this.props.handle('two組件')
}
}
export default Two
- three.js
import React, { Component } from "react"
import Observer from "../observer"
class Three extends Component {
render() {
console.log(1, this)
return (
<div className="three">
three組件
<button onClick={this.handleSend.bind(this)}>發(fā)送到two組件</button>
</div>
)
}
handleSend() {
Observer.$emit("handle", "three組件");
}
}
export default Three
（四）context
Provider-Consumer跨組件傳值，相當(dāng)于vue中的provide/reject
通過context創(chuàng)建一個(gè)生產(chǎn)者作為父級洽故，再創(chuàng)建一個(gè)消費(fèi)者組件作為子級使用贝攒。
- Consumer必須要有一個(gè)函數(shù)，返回一個(gè)jsx語法
Provider-Consumer.png
- createContext.js
import React, { createContext } from "react";
export let { Provider, Consumer } = createContext();
- index.jsx
import React, { Fragment } from "react";
import One from "./components/one"
import { Provider } from "./createContext"
class App extends React.Component {
render() {
return (
<Provider
value={{
username: "lxc",
age: 18
}}
>
<div className="app">
app組件
<One />
</div>
</Provider>
)
}
}
export default App;
- two.jsx
import React, { Component } from "react"
import { Consumer } from "../createContext"
class Two extends Component {
render() {
return (
<Consumer>
{
(props) => {
return (
<div className="Two">
two組件
<h2>接收app組件傳值username:{props.username} </h2>
</div>
)
}
}
</Consumer>
)
}
}
export default Two
