react入门----组件的基础用法

Posted Ethan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react入门----组件的基础用法相关的知识,希望对你有一定的参考价值。

1、组件

 1 <!-- React 允许将代码封装成组件(component),然后像插入普通 html 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类 -->
 2         var HelloMessage = React.createClass({
 3           render: function() {
 4             return <h1>Hello {this.props.name}</h1>
 5           }
 6         })
 7     <!-- 变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的 render 方法,用于输出组件。 -->
 8         ReactDOM.render(
10           <HelloMessage name="John" />,
11           document.getElementById(‘example‘)
12         )

2、组件要注意的两个规则(a.组件名的第一个字母,必须大写,否则会报错,b.组件类只能包含一个顶层标签,否则也会报错)

var HelloMessage = React.createClass({
          render: function() {
            return <h1>
              Hello {this.props.name}
            </h1><p>
              some text
            </p>
          }
        })
        <!-- 上面代码会报错,因为HelloMessage组件包含了两个顶层标签:h1和p。 -->
        <!-- 组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloMessage name="John"> ,
    就是 HelloMessage 组件加入一个 name 属性,值为 John。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。
-->

 3.this.props.children的使用和注意事项

  a.this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。

  b.React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法。

 1 var NyComponent = React.createClass({
 2             render: function () {
 3                 return(
 4                     <ol>
 5                         <!-- this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点  -->
 6                             React.Children.map(this.props.children, function(child) {
 7                                 return <li>{child}</li>
 8                             })
 9                         }
10                     </ol>)
11             }
12         })
13         <!-- 上面代码的 NyComponent 组件有两个 span 子节点,它们都可以通过 this.props.children 读取 -->
14         <!-- 这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。 -->
15         <!-- React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法, -->
16         ReactDOM.render(
17             <NyComponent>
18                 <span>hello</span>
19                 <span>world</span>
20             </NyComponent>,
21             document.getElementById(‘container‘)
22         )

4.PropTypes

  a.组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。

  b.组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求

 1 <!-- 组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。 -->
 2         <!-- /组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求 -->
 3         var MyTestComponent = React.createClass({
 4             propTypes: function () {
 5                 title: React.PropTypes.string.isRequired
 6             },
 7             render: function () {
 8                 return <h1> {this.props.title} </h1>
 9             }
10         })
11         <!-- 上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。 -->
12         <!-- 这样一来,title属性就通不过验证了。控制台会显示一行错误信息。 -->
13         var data = 123
14         ReactDOM.render(<MyTestComponent title={data}/>,document.getElementById(‘container‘))
15         <!-- 此外,getDefaultProps 方法可以用来设置组件属性的默认值。 -->
16         var MyTitle = React.createClass({
17           getDefaultProps : function () {
18             return {
19               title : ‘Hello World‘
20             };
21           },
22 
23           render: function() {
24              return <h1> {this.props.title} </h1>;
25            }
26         });
27 
28         ReactDOM.render(
29           <MyTitle />,
30           document.body
31         );

 

以上是关于react入门----组件的基础用法的主要内容,如果未能解决你的问题,请参考以下文章

React 入门 04 - props 和 state

React 入门 04 - props 和 state

来自一位react新手的react入门须知

从0到1无比流畅的React入门教程

React16.4 开发简书项目 从零基础入门到实战

React Native基础与入门--初识React Native