react学习笔记3：组件

最新推荐文章于 2025-08-22 19:09:26 发布

weixin_34296641

最新推荐文章于 2025-08-22 19:09:26 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tbd/blog/1544388

本文介绍React中的组件化开发，包括组件的创建、调用、传值及嵌套使用等核心概念，并通过实例演示如何将页面划分为多个独立的组件。

为什么80%的码农都做不了架构师？>>>

1.组件demo

组件是react最重要的功能，react的核心就是组件化开发我们的项目。

我们一个页面可以由n个div组成：那么同样我们把这n个div结构就可以划分成n个react组件，最后形成我们的页面。

我们要布局的页面包含：

header

center

footer

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

var arr=[
	<div className="header">header</div>,
	<div className="center">center</div>,
	<div className="footer">footer</div>
]
ReactDOM.render(
    <div>
		{arr}
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

我们把这三部分改为组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

//设置组件 头
class Header extends React.Component {
  render() {
    return <div className="header">header</div>;
  }
}
//设置组件 中心
class Center extends React.Component {
  render() {
    return <div className="center">center</div>;
  }
}
//设置组件 尾部
class Footer extends React.Component {
  render() {
     return <div className="footer">footer</div>;
  }
}


ReactDOM.render(
    <div>
		<Header />
		<Center />
		<Footer />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

2.创建组件

2.1创建组件

组件采用类的继承方式创建：

//设置组件 头
class Header extends React.Component {
  render() {
    return <div className="header">header</div>;
  }
}

类名首字母大写

2.2调用组建

<Header />

如同单标签的引用方式

3.组件传值和接收

3.1传值

在调用位置采用属性的方式设置传递值：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

//设置组件 头
class Header extends React.Component {
  render() {
    return <div className="header">header</div>;
  }
}
//设置组件 中心
class Center extends React.Component {
  render() {
    return <div className="center">center</div>;
  }
}
//设置组件 尾部
class Footer extends React.Component {
  render() {
     return <div className="footer">footer</div>;
  }
}


ReactDOM.render(
    <div>
		<Header name="小李子" />
		<Center />
		<Footer />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

3.2接收和显示

this.props.xx去接收：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

//设置组件 头
class Header extends React.Component {
  render() {
    return <div className="header">header {this.props.name}</div>;
  }
}
//设置组件 中心
class Center extends React.Component {
  render() {
    return <div className="center">center</div>;
  }
}
//设置组件 尾部
class Footer extends React.Component {
  render() {
     return <div className="footer">footer</div>;
  }
}


ReactDOM.render(
    <div>
		<Header name="小李子" />
		<Center />
		<Footer />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

显现如下：

4.组件嵌套

4.1嵌套

创建一个组件：

//设置组件 显示性别
class HeaderShowSex extends React.Component {
  render() {
    return <span>性别：男</span>;
  }
}

这个组件在header组件在中调用：

//设置组件 头
class Header extends React.Component {
  render() {
    return <div className="header">header {this.props.name}<HeaderShowSex /></div>;
  }
}

显示如下：

4.2嵌套组件传值

我们在header组件调用位置把性别传到HeaderShowSex组件，

我们在header组件用this.props.sex获取，然后在HeaderShowSex组件调用位置用属性方式设置，在HeaderShowSex组件在用this.props.sex接收

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

//设置组件 头
class Header extends React.Component {
  render() {
    return <div className="header">header {this.props.name}<HeaderShowSex sex={this.props.sex} /></div>;
  }
}
//设置组件 显示性别
class HeaderShowSex extends React.Component {
  render() {
    return <span>性别：{this.props.sex}</span>;
  }
}

//设置组件 中心
class Center extends React.Component {
  render() {
    return <div className="center">center</div>;
  }
}
//设置组件 尾部
class Footer extends React.Component {
  render() {
     return <div className="footer">footer</div>;
  }
}


ReactDOM.render(
    <div>
		<Header name="小李子" sex="男" />
		<Center />
		<Footer />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

5.组件调用写法（单标签和闭合标签）

我们上面都是使用单标签形式调用：

<Header name="小李子" sex="男" />

react还支持闭合标签调用：

<Header name="小李子" sex="男"></Header>

转载于:https://my.oschina.net/tbd/blog/1544388