react---组件

最新推荐文章于 2023-08-26 14:35:14 发布

我是大魔王2

最新推荐文章于 2023-08-26 14:35:14 发布

阅读量120

点赞数

分类专栏： react 文章标签： react组件

本文链接：https://blog.csdn.net/mylovewanzi/article/details/90924163

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

react—组件

文章目录

react---组件
@[toc]
怎么定义组件
1.使用函数定义组件
2.使用你也可以使用 ES6 class 来定义一个组件

简单组件
1.直接引用
2.简介引用

进阶组件
1.带参数组件
2.复合组件
3.组件中包含自定义方法

使用组件我们可以更好的管理应用

怎么定义组件

1.使用函数定义组件

    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    }

2.使用你也可以使用 ES6 class 来定义一个组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

简单组件

1.直接引用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello World!</h1>;
}

ReactDOM.render(
	<HelloMessage />,
	document.getElementById('example')
);
</script>

</body>
</html>

2.简介引用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello World!</h1>;
}

const element = <HelloMessage />;

ReactDOM.render(
	element,
	document.getElementById('example')
);
</script>

</body>
</html>

进阶组件

1.带参数组件

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

2.复合组件

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="菜鸟教程" />
        <Url url="http://www.runoob.com" />
        <Nickname nickname="Runoob" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

3.组件中包含自定义方法

// 定义组件
class Count extends React.Component {

	constructor(){
		super();
		this.state={count:0};
	}

	update(){
		this.setState({
			count:++this.state.count
		});
	}

   render(){
   	 return (
    		<div>
    			<h1>Hello World!</h1>
    			<h3>{this.state.count}</h3>
    		</div>

    	);
   }
}
 
// 声明组件
const element = <Count />;
 
// 声明全局变量
Count=ReactDOM.render(
    element,
    document.getElementById('example')
);

-END-

我是大魔王2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
react---组件

react—组件使用组件我们可以更好的管理应用怎么定义组件1.使用函数定义组件 function HelloMessage(props) { return <h1>Hello World!</h1>; }2.使用你也可以使用 ES6 class 来定义一个组件class Welcome extends React.Compone...
复制链接

扫一扫