react中的检查属性类型、不受控组件和web组件

                                                   react中的检查属性类型、不受控组件和web组件

检查属性类型

在react中，也提供了一下特殊的检验方法，其主要是对接受到的props的类型进行检验，下面先举一个实际的例子。

在上面的代码部分中，主要去name属性的类型进行了一个检验，其检验的内容是接受一个字符串形式的name，因此在这里你传入的name就必须是字符串形式。

下面是在官方文档中提供的一些类型的说明。

将属性设置为必须的

通过PropsTypes.element属性，

设置默认属性

通过给你的Props分配defaultprops

不受控组件

在对于表单元素的数据流为上，在受控组件组件上，对于其起控制作用的是react上的组件，相反的在不受控组件上，控制其数据流的是DOM上的节点。下面使用了ref去写了一个不受控组件，为了去体现这一过程。

由于非受控组件将真相源保存在DOM中，因此在使用非受控组件时，有时更容易集成React和non-React代码。如果您想要快速和简洁，那么代码也可以稍微少一点。否则，您通常应该使用受控组件。

默认的Value值，其在受控组件与非受控组件中是不一样，如果你想在非受控组件中去初始化一个value值，你就得去使用defaultValue，例如在下面的这个例子中，体现了在非受控组件中去写这个初始值的方式。

文件输入框的使用

在html中<input type = 'file'>是为了让用户在自己的设备中去选择文件，那么在react中，这个功能是怎样实现的呢，这种方式的实现都是采用的不受控组件去完成的，具体的使用案例如同下面所示。

web组件

react和web组件是为了解决不同的功能而实现的，Web组件为可重用组件提供了强大的封装，而React提供了一个声明性库，使DOM与数据保持同步。这两个目标是互补的

1.在react中去使用web组件

Web组件通常公开一个命令式API。例如，视频Web组件可能会公开play()和pause()函数。要访问Web组件的命令式api，需要使用ref直接与DOM节点交互。如果您使用第三方Web组件，最好的解决方案是编写一个React组件，它作为Web组件的包装器。
Web组件发出的事件可能无法通过React呈现树正确传播。您将需要手动附加事件处理程序来处理React组件中的这些事件。

在web组件中使用的是class来代替react中的className

2.在web组件中使用react

在上面的代码中，如果你使用了Babel去进行转化，则代码不会运行。