我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

最近苏南大叔打算写react如何通过context传递参数的。但是,网上有文章说,context的出现,就是为了解决函数式组件无法通过props传递数据的问题而出现的。这个观点,苏南大叔可不敢同意了。为了证明这种观点的错误性,苏南大叔写了本篇文章。

苏南大叔:react教程,父组件如何通过props向子组件传递数据? - react-props
react教程,父组件如何通过props向子组件传递数据?(图4-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述react中,组件通过props传递参数的方式,并且说明这种方式存在的问题是什么,继而引出后续的context传递数据的文章。测试环境:create-react-app@5.0.1node@16.14.2react@18.2.0react-dom@18.2.0

导入import

import React, { useState, PureComponent } from "react";

苏南大叔:react教程,父组件如何通过props向子组件传递数据? - 组件嵌套
react教程,父组件如何通过props向子组件传递数据?(图4-2)

函数式组件接收props

const Sunan2 = (props) => {
    return (<p>函数1 :{props.count}</p>);
};
function Sunan3(props) {
    return (<p>函数2 :{props.count}</p>);
}

苏南大叔:react教程,父组件如何通过props向子组件传递数据? - 子组件代码
react教程,父组件如何通过props向子组件传递数据?(图4-3)

类式组件接收props

class Sunan4 extends PureComponent {
    render() {
        return (<p>类式1 :{this.props.count}</p>)
    }
}
class Sunan5 extends React.Component {
    render() {
        return (<p>类式2 :{this.props.count}</p>)
    }
}

父组件传递props

这个demo显示,无论是函数式组件还是类式组件,都是可以使用props传递参数的。

const Sunan = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>父组件:{count} &nbsp; <button onClick={() => setCount(count + 1)}>{"点击+1"}</button></p>
            <Sunan2 count={count} />
            <Sunan3 count={count} />
            <Sunan4 count={count} />
            <Sunan5 count={count} />
        </div>
    );
};
export default Sunan;

苏南大叔:react教程,父组件如何通过props向子组件传递数据? - 父组件代码
react教程,父组件如何通过props向子组件传递数据?(图4-4)

结论

其实,无论是函数式组件还是类式组件,都是可以传递接收props。它最大的问题就是:如果多个组件层层嵌套的时候,props的传递就显得特别复杂和无助了,还可能需要把props转为state,代码的复杂度就直线上升了。

苏南大叔认为:这种情况就可以使用reduxstore来解决问题,或者使用react自带的Context来解决问题,只需要维护一个地方的数据即可。在Prodiver内部包裹的所有的子组件,无论嵌套多少层,都可以访问到Context数据。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react