类组件传值
父子 组件传值
子 传 父:
子组件:事件的触发
sendMsg=()=>{
this.props.person();
}
父组件:
<Child person={this.getMsg}></Child>
getMsg=(data)=>{
console.log(data);
}
父 传 子:
父组件
state = {
num : 100
}
<Child num={this.state.num}></Child>
子组件
this.props.num
父子组件传值案例(导航下拉框效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子组件传值导航效果</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone@6.15.0/babel.min.js'></script>
<style>
#box{
width: 80%;
padding: 10px;
margin: auto;
outline: 1px solid red;
overflow: hidden;
}
.nav{
display: flex;
justify-content: space-around;
}
.nav span{
height: 30px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/babel">
class Nav extends React.Component{
constructor(props){
super(props);
this.state = {
title:['区域','价格','房型','朝向'],
num : 0
}
}
render(){
return(
<React.Fragment>
<div className="nav">
{
this.state.title.map((item,i)=>{
return <span key = {i} onClick={()=>{this.getindex(i)}}>{item}</span>
})
}
</div>
<NavSecond index={this.state.num} tab={this.getData}></NavSecond>
</React.Fragment>
)
}
getindex = (index)=>{
console.log(index);
this.setState({
num:index
})
}
getData = (text)=>{
this.state.title.splice(this.state.num,1,text)
this.setState({
title:this.state.title
})
console.log(text);
}
}
class NavSecond extends React.Component{
constructor(props){
super(props);
this.state = {
con:[
['高新区','中原区','二七区','经开区','荥阳'],
['20W','40W','60W','80W','100W'],
['一室','两室','三室','四世','复式'],
['朝南','朝东','朝西','朝北']
]
}
}
render(){
return (
<React.Fragment>
{
this.state.con[this.props.index].map((item,i)=>{
return <p key = {i} onClick={()=>{this.sendData(item)}}>{item}</p>
})
}
</React.Fragment>
)
}
sendData=(text)=>{
this.props.tab(text);
}
}
ReactDOM.render(<Nav/>,document.querySelector('#box'));
</script>
</html>
非父子 组件传值
**方法:
1)redux 公共池(只能使用在脚手架中)
2)按照原来父子组件之间的关系,进行一层层传递
3)context上下文(官方提供的数据传输的方式) 推荐使用这种方式**
步骤:
- 声明context组件
let context = React.createContext(); - 在你需要发送数据的组件上写上 context.Provider发送数据
<context.Provider value={要发送的数据}>
<组件标签 ></组件标签>
</context.Provider> - 在需要接受数据的组件上 写上 context.Consumer 消费者组件,来接受数据
<context.Consumer>
{value=>{value}怎么渲染数据}
</context.Consumer>
案例:
<script type='text/babel'>
class A extends React.Component{
constructor(props){
super(props)
this.state = {
data:''
}
}
render(){
return (
<div>
a组件 -- {this.state.data}
{/* 接收B组件传递过来的值 */}
<B num={this.getData}></B>
{/* 将A组件中的数据传递给C组件 */}
<C msg={this.state.data}></C>
</div>
)
}
getData=(data)=>{
this.setState({
data
})
}
}
class B extends React.Component{
constructor(props){
super(props)
this.state = {
num:'张三丰'
}
}
render(){
return (
<div>
B组件
<button onClick={()=>{this.sendData(this.state.num)}}>发送数据给A组件</button>
</div>
)
}
sendData=(data)=>{
this.props.num(data);
}
}
class C extends React.Component{
render(){
return (
<div>
C组件 -- {this.props.msg}
</div>
)
}
}
ReactDOM.render(<A></A>,document.getElementById('app'));
</script>