React组件无状态函数式组件的创建传参和抽离

Posted 2021-07-25 前端工作日

一、创建

在React中，构造函数就是一个组件

我们定义一个Hello组件，注意：组件的首字母必须是大写

function Hello() { return <div> <h1>Hello呀</h1> </div>}

渲染到根节点中：

ReactDOM.render( <div>    <Hello></Hello> </div>, document.getElementById("app"));

样式：

二、传参

我们定义一个对象o

var o = { name:'zs', age: 18, hobbby:'study'}

在组件中，如果想要使用外部传递过来的数据，必须在构造函数参数列表中，定义props 属性来接收；

给Hello组件传递props传参

function Hello(props) { return ( <div> <h1>Hello呀{props.name}</h1> </div> ); }

把构造函数的名称，当作一个组件，以html标签形式引入页面中，并把对象传递给Hello组件

注意：通过 props 得到的任何数据都是只读的，不能从新赋值

ReactDOM.render( <div> <Hello {...o}></Hello> </div>, document.getElementById("app"));

样式：

三、抽离

在src目录下创建components文件夹，并把Hello组件抽离出去

记得要引入react，并导出Hello

import React from 'react'function Hello(props) { return ( <div> <h1>Hello呀{props.name}</h1> </div> );  }  export default Hello

然后在js中引入Hello.jsx

import React from "react";import ReactDOM from "react-dom";import Hello from "./components/Hello.jsx";var o = { name:'zs', age: 18, hobbby:'study'}
ReactDOM.render( <div> <Hello {...o}></Hello> </div>, document.getElementById("app"));

样式：

下节我们探讨class类创建的组建的创建、传参和抽离。

纸上得来终觉浅,须知此事要躬行，动手试试吧。

◆ ◆ ◆

Readings

锺书大概是记着我的埋怨，叫我做了一个长达万里的梦。

——书名：我们仨