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")
);