亲宝软件园·资讯

展开

React组件创建方式 React创建组件的的方式汇总

wslfw 人气:0
想了解React创建组件的的方式汇总的相关内容吗,wslfw在本文为您仔细讲解React组件创建方式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React组件创建方式,React创建组件,下面大家一起来学习吧。

1. 使用函数创建组件

  函数组件:使用JS的函数(或箭头函数)创建的组件

  约定1:函数名称必须以大写字母开头

  约定2:函数组件必须有返回值,表示该组件的结构

  如果返回值为null,表示不渲染任何内容

function Hello() {
    return (
        <div>这是我的第一个函数组件!</div>
    )
}
const Hello = () => <div>这是我的第一个函数组件!</div>

渲染函数组件:用函数名作为组件标签名

组件标签可以是单标签也可以是双标签

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  函数组件:
*/
function Hello() {
  return (
    <div>这是我的第一个函数组件!</div>
  )
}

//渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

2. 使用类创建组件

  组件类:使用ES6的class创建的组件

  约定1:类名称也必须以大写字母开头

  约定2:类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性

  约定3:类组件必须提供render()方法

  约定4:render()方法必须有返回值,表示该组件的结构

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  函数组件:
*/
function Hello() {
  return (
    <div>这是我的第一个函数组件!</div>
  )
}

//渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

3. 抽离为独立JS文件

  1. 创建Hello.js

  2. 在Hello.js中导入React

  3. 创建组件(函数或类)

  4. 在Hello.js中导出该组件

  5. 在index.js中导入Hello组件

  6. 渲染组件

Hello.js

import React from "react";

//创建组件
class Hello extends React.Component {
    render () {
        return (
            <div>这是我的第一个抽离到js文件中的组件!</div>
        )
    }
}

//导出组件
export default Hello

index.js

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  抽离组件到独立的JS文件中:
*/

//导入Hello组件
import Hello from './Hello';

//渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

加载全部内容

相关教程
猜你喜欢
用户评论