props只读性

weixin_45969726

已于 2023-08-18 14:58:56 修改

阅读量218

点赞数

文章标签： javascript 前端开发语言

于 2022-08-03 12:55:01 首次发布

本文链接：https://blog.csdn.net/weixin_45969726/article/details/125072729

版权

Props只读性

一、相关知识点

1.props 只读性

组件无论是使用函数声明还是通过class声明，都觉不能修改自身的props. 他有一个严格的规则：所有的React组件都必须向纯函数一样保护他们的props不被更改

2.违反props只读性报错

由于props不可以修改，如果修改了props的属性，会产生如下的报错

在这里插入图片描述

二、代码示例

1.引入相关链接及修改类型（不再展示代码）

2.JS代码

function Com(props) {
        //   函数内部一定返回组件模板

        // props.name="admin";
        return (
          <div className="com">
            <h3>Com组件</h3>
            {/* 如果组件加载<Com></Com>时，如果没有传递prop ,默认prop为空，不会报错 */}
            <p>
              姓名：{props.name},年龄：{props.age}
            </p>
          </div>
        );
      }
      ReactDOM.render(
        <Com name="小王" age="22"></Com>,
        document.getElementById("main")
      );