怎么用react组件

怎么用react组件

基本使用:

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 
// 因为react里有一种语法叫JSX,稍后会讲到JSX,要写JSX,就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用了。
// 它是从 react-dom 中引入的,而不是从 react 引入。
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,
// 然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了,它并不是一个字符串,看起来像是纯 HTML 代码写在
//  JavaScript 代码里面。语法错误吗?这并不是合法的 JavaScript 代码, 
// “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
  <h1>欢迎进入React的世界</h1>,
// 渲染到哪里
  document.getElementById('root')
)

元素与组件

如果代码多了之后,不可能一直在render方法里写,所以就需要把里面的代码提出来,定义一个变量,像这样:

import React from 'react'
import ReactDOM from 'react-dom'
// 这里感觉又不习惯了?这是在用JSX定义一下react元素
const app = '<h1>欢迎进入React的世界</h1>'
ReactDOM.render(
  app,
  document.getElementById('root')
)

函数式组件( 无状态组件 PureComponent)

由于元素没有办法传递参数,所以我们就需要把之前定义的变量改为一个方法,让这个方法去return一个元素:

import React from 'react'
import ReactDOM from 'react-dom'
// 特别注意这里的写法,如果要在JSX里写js表达式(只能是表达式,不能流程控制),
// 就需要加 {},包括注释也是一样,并且可以多层嵌套
const app = (props) => <h1>欢迎进入{props.name}的世界</h1>
ReactDOM.render(
  app({
    name: 'react'
  }),
  document.getElementById('root')
)

这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件,这也是无状态组件。但是这种写法不符合react的jsx的风格,更好的方式是使用以下方式进行改造

//函数式组件的标准写法
import React from 'react'
import ReactDOM from 'react-dom'
const App = (props) => <h1>欢迎进入{props.name}的世界</h1>
ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  document.getElementById('root')
)

这样一个完整的函数式组件就定义好了。但要注意!注意!注意!组件名必须大写,否则报错。

本文来自React答疑栏目,欢迎学习!

以上就是怎么用react组件的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    XML引入的常见问题

    XML引入的常见问题,,作者:angelgavin来源:CSDN 一般问题 什么是XML 可扩展标记语言(XML)是一个基于Web的通用语言,它使开发人员能够从许多不

    金蝶会计凭证引入前要做哪些

    金蝶会计凭证引入前要做哪些,,1.金蝶经典财务软件 怎么导入凭证?金蝶K3财务软件引入凭证的方法和步骤如下:方法一:用标准凭证引出成EXCEL之

    怎么设置锁屏|怎么设置锁屏小组件

    怎么设置锁屏|怎么设置锁屏小组件,,怎么设置锁屏小组件处理方法:1、打开top widgets,在中号小组件里找到 “快捷启动”2、快捷启动可以自定

    这句话有语法错误

    这句话有语法错误,点心,英语,本文目录这句话有语法错误瑞士最好的化妆品品牌有哪些请英语高手帮忙翻译点心英语怎么说这句话用英语该怎么

    电脑组件详解|电脑内部组件

    电脑组件详解|电脑内部组件,,电脑内部组件主版。主版(Main Borad)又称母版(Mother Board)或系统版(System Board),是计算机各组件的载体,整