React組件通信

1、props接收數據

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

第一種方式：函數組件props通過參數接收

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

第二種方式：類組件通過this.props.直接訪問

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

特點:

可以給組件傳遞任意類型的數據

props是只讀的對象，只能讀取屬性的值，無法修改對象

使用類組件時，如果寫了構造函數，應該將props傳遞給super(),否則，無法在構造函數中獲取props

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

2、父傳子

使用props：

//父組件 import Children from "./Children";class App extends React.Component {state = {data: "父組件state數據",};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>數據：{this.props.data}</p></div>);} }export default Children;

3、子傳父

利用回調函數，父組件提供回調，子組件調用

//父組件 import Children from "./Children"; class App extends React.Component {state = {data: "父組件state數據",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} />子組件數據：{this.state.data2}</div></div>);} }export default App; //子組件 class Children extends React.Component {sendData = () => {this.props.getChildData("子組件傳遞數據");};render() {return (<div><h3> childrens </h3><p onClick={this.sendData}>數據：{this.props.data}</p></div>);} }export default Children;

4、兄弟組件傳值

用父級做中間件，子傳父，父再傳子

//children1 import React from "react";class Children extends React.Component {sendData = () => {this.props.getChildData("子組件傳遞數據");};render() {return (<div><h3> childrens </h3><p onClick={this.sendData}>點擊children1</p>數據：{this.props.data}</div>);} }export default Children; //Children2 import React from "react"; class Children2 extends React.Component {render() {return (<div>顯示兄弟children組件的數據：{this.props.data}</div>);} }export default Children2; //App 父組件 import Children from "./Children"; import Children2 from "./Children2"; class App extends React.Component {state = {data: "父組件state數據",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} />父組件顯示子組件數據：{this.state.data2}子組件2：<Children2 data={this.state.data2} /></div></div>);} }export default App;

其實都是用了props

5.children屬性

• children屬性：表示組件標簽的子節點，當組件標簽有子節點時，props就會有該屬性。
• 與props屬性一樣，值可以是任意值（文本、dom、甚至函數）

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

6.props深入

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

導入prop-type包

使用 組件名.propType = {} 來給組件的props添加校驗規則

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

指定特定結構的對象：（shape({ })）

oprionalObjectWithShape: PropType.shape({color: PropType.string,fontSize: PropsTypes.number }) 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。