reac学习之路（一） 组件之间的传值

近期对于react比较感兴趣 因为最近想要换工作 投递简历的时候发现一些高薪的或者大点的公司 对于react的应用更多点 所以往后就抽点时间把react在看看 之前也有学过 但是好多年没有用了 都忘记差不多了 好了 话不多说 开始我们的探索之路吧

学习react除了基本的语法 首先可能要明确的就是组件了 凡是涉及到组件的 立马想到的就是组件之间的通讯 react的通讯 和vue差不多 接下来就一起来看下吧

1. 父子组件之间的通讯

import React,{createContext} from "react";
class App extends React.Component{state={message:'我是父组件的数据'}render(){return(我是父组件)}
}
class Child extends React.Component{state={message:'我是子组件的数据'}render(){let {msg} = this.propsreturn(我是子组件接收到父组件的数据：{msg})}
}
export default App;

总结：在子组件标签上面自定义属性 属性值为父组件要传递的数据 在子组件内部通过props接收(函数组件通过props 类组件通过this.props) 使用props.属性名 或this.props.属性名 

2. 子父组件之间的通讯

import React,{createContext} from "react";
class App extends React.Component{state={message:'我是父组件的数据'}sendMsg = (e)=>{console.log(e)}render(){return(我是父组件)}
}
class Child extends React.Component{state={message:'我是子组件的数据'}sendMsg = ()=>{this.props.sendMsg(this.state.message)}render(){let {msg} = this.propsreturn(我是子组件接收到父组件的数据：{msg})}
}
export default App;

总结：在子组件标签上面自定义属性 属性值为父组件要传递的函数 在子组件内部通过props接收(函数组件通过props 类组件通过this.props) 使用props.属性名 或this.props.属性名调用传参  父组件通过函数的参数获取   简单来说就是 父组件传递给子组件一个函数 子组件调用函数并传参 

3. 兄弟组件之间的传值 

兄弟组件就不再叙述了 子组件穿给父组件 父组件接收然后传递给另一个子组件或者后续通过状态管理来传递

4.跨组件 

import React,{createContext} from "react";
const { Provider,Consumer}  = createContext()
class App extends React.Component{state={message:'我是父组件的数据'}sendMsg = (e)=>{console.log(e)}render(){return(我是父组件)}
}
class Child extends React.Component{state={message:'我是子组件的数据'}render(){return(我是子组件)}
}
class Sun extends React.Component{state={message:'我是孙组件的数据'}render(){return({this.state.message}{value=>{value}})}
}
export default App;

总结：通过createContext提供的Provider,Consumer 父组件用Provider包裹 并提供value值 孙组件通过Consumer包裹 通过value函数获取 

其实和vue是很相识的  相信很多人都是有vue的基础 上手因该会很容易的 在者就是 传参肯定涉及格式校验问题了 但是和vue不同的是 没有内置 react需要借助prop-type 

下载依赖

npm i prop-types

使用  引入 然后再组件后面用PropTypes定义校验格式

import PropTypes from "prop-types";Child.propTypes = {message:PropTypes.string //string number bool func object  array element  常见的 
}

其次就是必填项 在上面的基础上 进行isRequired串联

import PropTypes from "prop-types";Child.propTypes = {message:PropTypes.string,msg:PropTypes.string.isRequired //string number bool func object  array element  常见的 
}

再者肯定是涉及到默认值了 这里分为两种方式 一种是函数组件 一种是类组件  

函数组件通过组件.deafultProps 和解构两种方式 

deafultProps

function Child(props){return({props.message})
}Child.defaultProps ={message:'测试'
}

解构

function Child({message = "测试"}){return({message})
}

类组件的默认值

1.和上面一样 通过deafultProps

class Child extends React.Component{state={message:'我是子组件的数据'}render(){return(我是子组件 {this.props.message})}
}
Child.defaultProps ={message:'测试'
}

2.使用类静态属性声明 static deafultProps 

class Child extends React.Component{state={message:'我是子组件的数据'}static defaultProps ={message:'测试'}render(){return(我是子组件 {this.props.message})}
}

好了 今天的这个组件通讯，格式校验 及默认值就到这里了  后续将继续我的探索之路 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！