React組件通信

1、props接收數(shù)據(jù)

//index.js import App from "./App";ReactDOM.render(<App name='傳遞數(shù)據(jù)' age={19}color={[1,2,3]}fn={()=>{console.log('函數(shù)')}}tag={<p>段落</p>}/>,document.getElementById("root") );

第一種方式：函數(shù)組件props通過(guò)參數(shù)接收

//app.js function App(props) {function myClick(e) {console.log(props);}return (<div className="App"><button onClick={myClick}>按鈕</button></div>); } export default App;

第二種方式：類組件通過(guò)this.props.直接訪問(wèn)

class App extends React.Component {render() {return (<div><span>props: {this.props.name}</span></div>);} } export default App;

特點(diǎn):

可以給組件傳遞任意類型的數(shù)據(jù)

props是只讀的對(duì)象，只能讀取屬性的值，無(wú)法修改對(duì)象

使用類組件時(shí)，如果寫(xiě)了構(gòu)造函數(shù)，應(yīng)該將props傳遞給super(),否則，無(wú)法在構(gòu)造函數(shù)中獲取props

class Hello extends React.Component {constructor(props){super(props)console.log(props)}render(return(<div></div>)) }

2、父?jìng)髯?/h3>

使用props：

//父組件 import Children from "./Children";class App extends React.Component {state = {data: "父組件state數(shù)據(jù)",};render() {return (<div><span>props: {this.props.age}</span><div style={{ color: "red", border: "1px solid #f00" }}>子組件：<Children data={this.state.data} /></div></div>);} } export default App; //子組件 import React from "react";class Children extends React.Component {render() {return (<div><h3> childrens </h3><p>數(shù)據(jù)：{this.props.data}</p></div>);} }export default Children;

3、子傳父

利用回調(diào)函數(shù)，父組件提供回調(diào)，子組件調(diào)用

//父組件 import Children from "./Children"; class App extends React.Component {state = {data: "父組件state數(shù)據(jù)",data2: "",};getChildData = (val) => {console.log("val", val);this.setState({data2: val,});};render() {return (<div><span>props: {this.props.age}</span><div style={{ color: "red", border: "1px solid #f00" }}>子組件：<Children data={this.state.data} getChildData={this.getChildData} />子組件數(shù)據(jù)：{this.state.data2}</div></div>);} }export default App; //子組件 class Children extends React.Component {sendData = () => {this.props.getChildData("子組件傳遞數(shù)據(jù)");};render() {return (<div><h3> childrens </h3><p onClick={this.sendData}>數(shù)據(jù)：{this.props.data}</p></div>);} }export default Children;

4、兄弟組件傳值

用父級(jí)做中間件，子傳父，父再傳子

//children1 import React from "react";class Children extends React.Component {sendData = () => {this.props.getChildData("子組件傳遞數(shù)據(jù)");};render() {return (<div><h3> childrens </h3><p onClick={this.sendData}>點(diǎn)擊children1</p>數(shù)據(jù)：{this.props.data}</div>);} }export default Children; //Children2 import React from "react"; class Children2 extends React.Component {render() {return (<div>顯示兄弟children組件的數(shù)據(jù)：{this.props.data}</div>);} }export default Children2; //App 父組件 import Children from "./Children"; import Children2 from "./Children2"; class App extends React.Component {state = {data: "父組件state數(shù)據(jù)",data2: "",};getChildData = (val) => {console.log("val", val);this.setState({data2: val,});};render() {return (<div><span>props: {this.props.age}</span><div style={{ color: "red", border: "1px solid #f00" }}>子組件：<Children data={this.state.data} getChildData={this.getChildData} />父組件顯示子組件數(shù)據(jù)：{this.state.data2}子組件2：<Children2 data={this.state.data2} /></div></div>);} }export default App;

其實(shí)都是用了props

5.children屬性

• children屬性：表示組件標(biāo)簽的子節(jié)點(diǎn)，當(dāng)組件標(biāo)簽有子節(jié)點(diǎn)時(shí)，props就會(huì)有該屬性。
• 與props屬性一樣，值可以是任意值（文本、dom、甚至函數(shù)）

function Hello(props) {return {<div>組件是子節(jié)點(diǎn)：{props.children}</div>} }<Hello> 我是子節(jié)點(diǎn) </Hello>

6.props深入

安裝prop-type（npm i prop-types）

導(dǎo)入prop-type包

使用 組件名.propType = {} 來(lái)給組件的props添加校驗(yàn)規(guī)則

import PropTypes from 'prop-types' function App(props){return {<h1>Hi, {props.colors}</h1>} } App.proptypes = {//約束colors屬性為arrray類型colors: Proptypes.array//類型有： array、bool、func、number、object、string、element }

必填：(.isRequired)

requireFunc: PropTypes.func.isRequired

指定特定結(jié)構(gòu)的對(duì)象：（shape({ })）

oprionalObjectWithShape: PropType.shape({color: PropType.string,fontSize: PropsTypes.number }) 與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的React组件通信--props的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。