react 动态添加组件属性_「React 基础」关于组件属性（props）与状态（state）的入门介绍...

大家好，在上一篇文章里，我们一起学习了如何创建第一个 React 组件，我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件，但是还有更多关于组件的内容值得我们去深入学习。本篇文章，我将和大家一起复习下如何使用组件的属性(props)与状态(state)。

如何使用组件的属性(props)

和其它应用程序一样，组件应具备重用性。接下来我们将基于上一节的例子，分别创建以下组件：头部组件( Header), 内容组件(Content), 和底部组件(Footer)，将其分组放置在 layout 文件夹中，通过 props 传递属性(属性或子组件)，并验证属性值的合法性。

1、首先我们来看下 App.js 文件中的 Header部分：React

logo

Home

div className

header className

img srclogo className alt

a

className

href

target

rel

Learn React

a

header

Home

div

App

2、接下来，我们需要将 header 内容部分拿走，放到我们的 Header 组件里，然后通过 import 的方式引入到 App.js 文件中。因为类似这样的头部、尾部组件是公共布局组件，我们需要创建一个共享布局组件目录(layout)到我们的共享目录里(src/shared/components/layout)。

3、在此之前，我们需要安装 prop-types 依赖包，因为我们需要在 Header 组件里定义属性类型及相关验证逻辑，打开控制台将其运行环境切换至项目目录，并输入以下命令完成安装：npm install prop-types

4、PropTypes 最初是作为 React 核心模块之一一起发布的，将其应用到 React 组件中，我们用来判断组件的属性传递是否符合设置的预期，如果传递的属性与其不匹配，将会有警告提示。最终我们完成的 Header 组件代码如下：React  Component

ProTypes

logo

proTypes

titleProTypesstringisRequired

urlProTypesstring

title

url

props