React学习（从零基础到精通）1000

南才

于 2021-06-12 10:58:20 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

分类专栏： react学习 react 文章标签： react

本文链接：https://blog.youkuaiyun.com/Heyuner/article/details/117841420

react 同时被 2 个专栏收录

26 篇文章

订阅专栏

react学习

25 篇文章

订阅专栏

本文详细介绍了如何在React中正确使用组件的props属性，包括基本用法示例，如通过对象直接传递、props命名和默认值。通过实例演示了如何传递和修改组件的name、age和sex属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件实例三大属性 ---props的基本使用

    <script type="text/babel">
    //创建组件
    class Person extends React.Component {
        render(){
            // console.log(this);
            const {name,age,sex} = this.props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{age+1}</li>
                    <li>年龄：{sex}</li>
                </ul>
            )
        }
    }
    const p = {name:"jack",age:40,sex:"男"}
    ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById("test"))
    ReactDOM.render(<Person name="jerry" age={28} sex="女"/>,document.getElementById("test2"))
    // ReactDOM.render(<Person name="jack" age="40" sex="男"/>,document.getElementById("test3"))
    ReactDOM.render(<Person {...p}/>,document.getElementById("test3"))
    </script>