React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。
React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開始關(guān)注和使用它。
React 特點(diǎn)
1.聲明式設(shè)計(jì) −React采用聲明范式，可以輕松描述應(yīng)用。
2.高效 −React通過(guò)對(duì)DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 −React可以與已知的庫(kù)或框架很好地配合。
4.JSX − JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 − React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。
下面給大家介紹React 非父子組件傳參的實(shí)例代碼，具體內(nèi)容如下：
新版：跨級(jí)傳參最主要是避免每層賦值，也避免用到dva
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import React from 'react'const {Provider,Consumer} = React.createContext('default')export default class ContextDemo extends React.Component { state={ newContext:'createContext' } render() { const {newContext} = this.state return ( <Provider value={newContext}> <div> <label>childContent</label> <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/> </div> <Son /> </Provider> ) }}class Son extends React.Component{ render(){ return <Consumer> { (name)=> <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}> <p>子組件獲取到的內(nèi)容:{name}</p> <Grandson /> </div> } </Consumer> }}class Grandson extends React.Component{ render(){ return <Consumer> { (name)=> <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}> <p>孫子組件獲取到的內(nèi)容:{name}</p> </div> } </Consumer> }} |
老項(xiàng)目的方式也介紹一下，利用prop-types
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import React from 'react'import PropTypes from 'prop-types'class ContextDemo extends React.Component { // getChildContext state={ newContext:'createContext' } getChildContext(){ return {value:this.state.newContext} } render() { const {newContext} = this.state return ( <div> <div> <label>childContent</label> <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/> </div> <Son /> </div> ) }}class Son extends React.Component{ render(){ return <div> <p>children:{this.context.value}</p> </div> }}Son.contextTypes = { value:PropTypes.string}ContextDemo.childContextTypes = { value:PropTypes.string}export default () => <ContextDemo > </ContextDemo> |
ref
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import React from 'react'// 函數(shù)組件也想拿到dom 通過(guò) refconst TargetFunction = React.forwardRef((props,ref)=>( <input type="text" ref={ref}/>))export default class FrodWordRefDemo extends React.Component { constructor() { super() this.ref = React.createRef() } componentDidMount() { this.ref.current.value = 'ref get input' } render() { return <TargetFunction ref={this.ref}> </TargetFunction> }} |
pubsub-js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import React from 'react'import PubSub from 'pubsub-js'export default class Bro extends React.Component{ state = { value:'' } render(){ const {value} = this.state PubSub.subscribe('SOS',(res,data)=>{ this.setState({ value:data }) }) return ( <div> 我接受到了 <h1>{value}</h1> </div> ) }} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
import React from 'react'import PubSub from 'pubsub-js'export default class Children extends React.Component{ state = { value:'' } handelChange = (e) =>{ this.setState({ value:e.target.value }) } send = () =>{ const {value} = this.state PubSub.publish('SOS',value) } render(){ const {value} = this.state return ( <div> <input type="text" value={value} onChange={this.handelChange}/> <button onClick={this.send}>發(fā)送</button> </div> ) }} |
到此這篇關(guān)于React 非父子組件傳參的實(shí)例代碼的文章就介紹到這了,更多相關(guān)React 非父子組件傳參內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/aa2528877987/article/details/107601832
