![React.js 16从入门到实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/135/29977135/b_29977135.jpg)
上QQ阅读APP看书,第一时间看更新
3.7 React Props只读性
虽然React Props很好用,但在使用上是有限制的。React框架规定Props是不能被修改的,也就是说Props是个只读的参数。如果尝试修改Props会发生什么呢?下面,我们再回过头看一下【代码3-7】定义的代码实例:
【代码3-7节选】(详见源代码目录ch03-react-props-form.html文件)
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P62_8596.jpg?sign=1739404633-WMMme12OoHQ4PL7YTllgwr0N9KXRsusi-0-c40352053ab59eacae8a10b7cf55d96b)
关于【代码3-7节选】的说明:
●第23行和第29行代码分别通过<input>标签元素定义了一个文本输入框,注意在<input>标签元素中增加定义了只读属性(readOnly)。
这里为什么要增加这个只读属性呢?为了更好地说明这里的代码,我们将【代码3-7】改写如下:
【代码3-8】(详见源代码目录ch03-react-props-readonly.html文件)
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P63_8802.jpg?sign=1739404633-49h0CfNfFnLlUBFsoTDxGxIaXcs70kOK-0-37383c262f91da772a5f311a992961da)
关于【代码3-8】的说明:
●在第23行和第29行代码通过<input>标签元素定义的文本输入框中,取消了只读属性(readOnly)的定义。
测试网页的效果如图3.6所示。如图中的标识所示,浏览器控制台中显示了关于props参数使用的错误信息。这里就不逐句翻译内容了,大致意思就是“Props为只读类型,将其放入文本输入框这种可改变内容的域中是错误的做法”。
![](https://epubservercos.yuewen.com/27D3F5/16499866705998906/epubprivate/OEBPS/Images/Figure-P64_9138.jpg?sign=1739404633-7JdOSG9gwHIvCdnTu28ocPvidSmtCPZQ-0-00651a879d08fa2ce3f830b5645410c0)
图3.6 React Props只读性