React props

最新推荐文章于 2024-07-21 15:57:26 发布

MW0309

最新推荐文章于 2024-07-21 15:57:26 发布

阅读量121

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_42222342/article/details/105100427

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

props

props是react中一个重要的属性，是组件对外的接口我们props 就可以从组件的内部进行数据的传递
也可以完成父组件给子组件的数据传递
注意：无论是无状态组件还是类组件我们都不能修改自身的props

props无状态组件实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props无状态组件</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="demoReact">

    </div>
    <script type="text/babel">
        function Com(props){
            return(
                <div>
                    我是一个无状态组件----外部传递的数据是：{props.text}---{props.num}
                </div>
            )
        }
        let obj={
            text:'我是text数据',
            num:'我是num数据'
        }
        ReactDOM.render(<Com {...obj}/>,document.getElementById("demoReact"));
    </script>
</body>
</html>

效果图

在这里插入图片描述

props 类组件实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props类组件</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="demoReact">

    </div>
    <script type="text/babel">
        //创建类组件 组件名首字母大写
        class MyCom extends React.Component{
            render(){
                return(
                    <div>我是类组件---{this.props.name}---{this.props.num}</div>
                )
            }
        }

        let obj={
            name:'我是name数据',
            num:'我是num数据'
        };
        ReactDOM.render(<MyCom {...obj}/>,document.getElementById("demoReact"));
    </script>
</body>
</html>