組件

組件是React中最重要也是最核心的概念，一個(gè)網(wǎng)頁(yè)，可以被拆分成一個(gè)個(gè)的組件

在React中，這樣定義一個(gè)組件：

import React from 'react'; //第一步，導(dǎo)入React class HelloWorld extends React.Component { //第二步，編寫類并且繼承 React.Componentrender(){ //第三步，重寫render()方法，用于渲染頁(yè)面return <div>hello world!, name={this.props.name}, 內(nèi)容={this.props.children}</div> //JSX語(yǔ)法} } export default HelloWorld; //第四步，導(dǎo)出該類

導(dǎo)入自定義組件

創(chuàng)建Show.js文件，用于測(cè)試導(dǎo)入組件：

import React from 'react' import HelloWorld from './HelloWorld' //導(dǎo)入HelloWorld組件 class Show extends React.Component{render(){return <HelloWorld name="zhangsan">shanghai</HelloWorld>; //使用HelloWorld組件} } export default Show;

組件參數(shù)

組件是可以傳遞參數(shù)的，有2種方式傳遞，分別是屬性和標(biāo)簽包裹的內(nèi)容傳遞，具體使用如下：

其中，name="zhangsan"就是屬性傳遞，shanghai就是標(biāo)簽包裹的內(nèi)容傳遞。 那么，在HelloWord.js組件中如何接收參數(shù)呢？ 對(duì)應(yīng)的也是2種方法： 屬性：this.props.name 接收； 標(biāo)簽內(nèi)容：this.props.children 接收； 使用如下：

?

?

?

總結(jié)

以上是生活随笔為你收集整理的ReactJS入门之组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。