React：组件

React 组件

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。

我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component（类定义）。一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的。

 

函数组件

类组件

 

1、定义单个组件

（1）定义组件

• 方式1：通过React自定义组件（DOM元素）：类定义

import React, {Component} from 'react';
class MyApp extends Component {
}
​
import React from 'react';
class MyApp extends React.Component {
    constructor(props){
        super(props);
        this.msg="hello,react"
    }
    
    render() {
        return (
            <div>
                <div>{this.msg}</div>
                <h2>这是标题2</h2>
                <h3>这是标题2</h3>
            </div>
        );
    }
}
export default MyApp;

 

• 方式2：通过React自定义组件（DOM元素）：函数定义

import React from 'react';
//箭头函数
const MyApp = () => <div><p>这是一个段落</p></div>;
export default MyApp;
​
​
//普通函数
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome;

 

• 方式3：不建议使用，React.createClass创建组件的方式在react 16版本中去除。

var MyApp = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

 

（2）使用组件

import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './js/MyApp.js'; //导入自定义组件
​
ReactDOM.render(<MyApp />, document.getElementById('root'));

 

 

2、定义复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离

import React from 'react';
import ReactDOM from 'react-dom';
​
class WebSite extends React.Component {
    render() {
        return (
            <div>
                <Name name={this.props.name} />
                <Link site={this.props.site} />
            </div>
        );
    }
}
//局部组件Name
class Name extends React.Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}
//局部组件Link
class Link extends React.Component {
    render() {
        return (
            <h1>{this.props.site}</h1>
        );
    }
}
​
ReactDOM.render(
    <WebSite name="百度一下，你就知道" site='http://www.baidu.com' />, 
    document.getElementById('root')
)