React组件通信--props

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
})

React组件通信--props相关推荐

React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
react组件通信-逆战1913
父组件向子组件通信父组件: import React,{ Component } from "react"; import Childre from"./Childre ...
Vue3+Typescript学习笔记（十）组件通信--父子组件通信(props,$emit)，非父子组件通信(provide和inject,mitt库)
一.认识组件的嵌套 1. App单独开发前面我们是将所有的逻辑放到一个App.vue中: 在之前的案例中,我们只是创建了一个组件App: 如果我们一个应用程序将所有的逻辑都放在一个组件中,那么这个组 ...
React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...
React组件通信传值父传子子传父兄弟组件传值
一.父组件传递子组件在父组件中引入子组件,将父组件的state值放到子组件标签中传递,在子组件中用this.props.传值名称,接收父组件代码: import React, { Componen ...
（26）Vue.js组件通信—props 命名规则
建议 prop 命名使用 camelCase(驼峰命名法),父组件绑定时使用 kebab-case(多个单词使用连字符连接书写).
React中组件通信的几种方式
首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件 ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...

React组件通信--props

React组件通信

1、props接收数据

2、父传子

3、子传父

4、兄弟组件传值

5.children属性

6.props深入

React组件通信--props相关推荐

最新文章

热门文章