React-router（6）父组件传【值】 or 【函数】给子组件

小灰灰 2022-05-30 04:09 201阅读 0赞

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

[DEMO地址][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>
        }
    }

[DEMO]: https://github.com/qq20004604/react-demo/blob/master/react-router/src/5.fromParentComponent.js