ReactJS学习(四)

用户1289394

发布于 2023-01-06 14:45:41

7900

发布于 2023-01-06 14:45:41

文章被收录于专栏：Java学习网Java学习网

2.4.2、组件

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件，像这样：

在React中，这样定义一个组件：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
render(){ //第三步，重写render()方法，用于渲染页面
return <div>hello world!</div> //JSX语法
}
}
export default HelloWorld; //第四步，导出该类

查看效果：

2.4.2.1、导入自定义组件

创建Show.js文件，用于测试导入组件：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
render(){
return <HelloWorld/>; //使用HelloWorld组件
}
}
export default Show;

测试：

2.4.2.2、组件参数

组件是可以传递参数的，有2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

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;

其中，name="zhangsan"就是属性传递，shanghai就是标签包裹的内容传递。

那么，在HelloWord.js组件中如何接收参数呢？

对应的也是2种方法：

属性：this.props.name 接收；

标签内容：this.props.children 接收；

使用如下：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
render(){ //第三步，编写render()方法，用于渲染页面
return <div>hello world! name={this.props.name}, address={this.props.children}
</div> //JSX语法
}
}
export default HelloWorld; //第四步，导出该类

测试：