react教程，父组件如何通过props向子组件传递数据？

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

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

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

导入import

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

函数式组件接收props

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

类式组件接收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;

结论

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

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

• https://newsn.net/tag/redux/
• https://newsn.net/tag/react/

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