6、父组件传 【值】 or 【函数】 给子组件

DEMO地址
参考 5.fromParentComponent.js

如果你已经熟悉了前面的内容，会知道以下结论：

1. 路由传参是通过 props 传参的；
2. 子组件，是写在 Route 标签的 component 属性中的；
3. 通过 Route 标签绑定值，是无法将值，从父组件传给子组件的；

那怎么办？

解决方案也不难，思路如下：

1. 组件可以是一个函数；如const MySecond = () => <div>1</div>；
2. Route 标签的 component 属性支持以上函数写法（显而易见）；
3. 我们可以将子组件嵌套到函数返回的组件中；
4. 此时我们的组件结构如下：父组件 >> Route 标签 >> 函数组件 >> 子组件；
5. ①父组件和 Route 进行数据通信没意义；
6. ②父组件没办法和函数组件通信；
7. ③但父组件可以直接和子组件通信；

因此，父组件将值先绑定给子组件标签，然后再返回函数组件；

显然，父组件是可以和子组件通信的，但唯一问题是此时，如何将路由信息从函数组件传给子组件（路由信息从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>
    }
}