React 组件

转载于 2018-03-19 22:15:56 发布 · 143 阅读

文章标签：

1.创建组件

import React from 'react';
import './Test.css';

class Test extends React.Component{
    render(){
        return (
            <div>

                <h4 class="title"> MyName Test</h4>
            </div>
        )
    }
}

export default Test;

封装一个输出 "MyName Test" 的组件，组件名为 Test：

React.createClass 方法用于生成一个组件类 Test。

<Test /> 实例组件类并输出信息。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

2.向组件传递参数

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

import React from 'react';
import './Test.css';

class Test extends React.Component{
    render(){
        return (
            <div>
                <h4 class="title"> MyName Test</h4>
                <h5>{this.props.name}</h5>
            </div>
        )
    }
}

export default Test;