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

Posted 前端工作日

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"));

样式:

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


三、抽离


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



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


记得要引入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

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

——书名:我们仨

以上是关于React组件无状态函数式组件的创建传参和抽离的主要内容,如果未能解决你的问题,请参考以下文章

react.js基础

React组件基础

React组件基础

03react 之创建component

从0到1教你学会 react

JS每日一题: react中类组件和函数式组件中有什么不同?