React 组件

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

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

 

1、定义单个组件

（1）定义组件

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

import React, { Component } from 'react'

export default class App2 extends Component {

  render() {

    return (

      <div>App2</div>

    )

  }

}

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

import React from 'react'

export default function App2() {

  return (

    <div>App2</div>

  )

}

 

（2）使用组件

导入：

import App2 from "./App2"

 

使用：

<App2></App2>

 

注意：一份文件一个类