【React组件】无状态函数式组件的创建、传参和抽离
一、创建
在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
锺书大概是记着我的埋怨，叫我做了一个长达万里的梦。
——书名：我们仨