6、父组件传 【值】 or 【函数】 给子组件
参考 5.fromParentComponent.js
如果你已经熟悉了前面的内容,会知道以下结论:
- 路由传参是通过 props 传参的;
- 子组件,是写在 Route 标签的 component 属性中的;
- 通过 Route 标签绑定值,是无法将值,从父组件传给子组件的;
那怎么办?
解决方案也不难,思路如下:
- 组件可以是一个函数;如
const MySecond = () => <div>1</div>
; - Route 标签的
component
属性支持以上函数写法(显而易见); - 我们可以将子组件嵌套到函数返回的组件中;
- 此时我们的组件结构如下:父组件 >> Route 标签 >> 函数组件 >> 子组件;
- ①父组件和 Route 进行数据通信没意义;
- ②父组件没办法和函数组件通信;
- ③但父组件可以直接和子组件通信;
因此,父组件将值先绑定给子组件标签,然后再返回函数组件;
显然,父组件是可以和子组件通信的,但唯一问题是此时,如何将路由信息从函数组件传给子组件(路由信息从Route传给了函数组件);
这也不难。
函数组件是可以拿到 props 的,通过 Object.assign()
将 props 和 父组件绑定给子组件的【函数/变量】混合到一起,再传给子组件。
此时,子组件就同时拿到了 路由数据 和 父组件 传给他的数据。
【传一个对象给子组件】
唯一可能存在的问题是,这个数据怎么传给子组件(毕竟是一个对象),我们之前接触的方法都是 k = v
方式传给子组件,但显然这个方法不能这么做。
React也有解决方法,具体来说,利用 es6 的扩展运算符 ...
比较简单的写法是 <First {...props}/>
,将自动展开 props 并传给 First 组件。
示例DEMO:
【例行引入依赖和子组件,子组件负责显示值】
import React from "react";
import {HashRouter as Router, Link, Route} from 'react-router-dom'
class First extends React.Component {
render() {
return <div>【1】当前 time 值为:{this.props.time}</div>
}
}
const Second = (props) => <div>
【2】time(负数): {props.time * -1}
</div>
【父组件】
class RoutingNested extends React.Component {
constructor() {
super()
this.state = {
time: 0
}
}
// 这个是生命周期,目的是为了测试 state 的传递
componentWillMount() {
this.timer = setInterval(() => {
this.setState({
time: this.state.time + 1
})
}, 1000)
}
// 卸载时,删除定时器
componentWillUnmount() {
clearInterval(this.timer)
}
render() {
// 这个写法和写在组件里,基本没什么区别,不过这样写感觉好看一些
const MySecond = props => {
let obj = Object.assign({}, {time: this.state.time}, props)
return <Second {...obj}/>
}
return <div>
<h3>5、父组件传参给子组件</h3>
<p>父组件当前值为:{this.state.time}</p>
<Router>
<div>
<li>
<Link to={`${this.props.match.url}`}>
跳转查看传参【1】
</Link>
</li>
<li>
<Link to={`${this.props.match.url}/2`}>
跳转示例【2】
</Link>
</li>
<hr/>
{/* 这种是写在组件里,没啥区别 */}
<Route exact path={`${this.props.match.url}/`}
component={props => {
let obj = Object.assign({}, {time: this.state.time}, props)
return <First {...obj}/>
}}/>
<Route path={`${this.props.match.url}/2`} render={MySecond}/>
</div>
</Router>
</div>
}
}