組件

組件是React中最重要也是最核心的概念，一個網頁，可以被拆分成一個個的組件

在React中，這樣定義一個組件：

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

導入自定義組件

創建Show.js文件，用于測試導入組件：

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

組件參數

組件是可以傳遞參數的，有2種方式傳遞，分別是屬性和標簽包裹的內容傳遞，具體使用如下：

其中，name="zhangsan"就是屬性傳遞，shanghai就是標簽包裹的內容傳遞。 那么，在HelloWord.js組件中如何接收參數呢？ 對應的也是2種方法： 屬性：this.props.name 接收； 標簽內容：this.props.children 接收； 使用如下：

?

?

?

總結

以上是生活随笔為你收集整理的ReactJS入门之组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。