react篇章-React 组件-复合组件

叁歲伎倆 2021-12-24 15:33 352阅读 0赞

<!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 Name(props) {
    	return <h1>网站名称：{props.name}</h1>;
    }
    function Url(props) {
    	return <h1>网站地址：{props.url}</h1>;
    }
    function Nickname(props) {
    	return <h1>网站小名：{props.nickname}</h1>;
    }
    
    function NameBlog(props) {
    	return <h1>博客名称：{props.name}</h1>;
    }
    function UrlBlog(props) {
    	return <h2>博客地址：{props.url}</h2>;
    }
    function NicknameBlog(props) {
    	return <h3>博客小名：{props.nickname}</h3>;
    }
    function App() {
    	return (
    	<div>
    		<Name name="菜鸟教程" />
    		<Url url="http://www.runoob.com" />
    		<Nickname nickname="Runoob" />
    	</div>
    	);
    }
    function AppBlog() {
    	return (
    	<div>
    		<NameBlog name="zzzzw的博客" />
    		<UrlBlog url="https://www.cnblogs.com/zzzzw" />
    		<NicknameBlog nickname="zzzzw" />
    	</div>
    	);
    }
    
    ReactDOM.render(
    	 <AppBlog />,
    	document.getElementById('example')
    );
    </script>
    
    </body>
    </html>

![593690-20190221105225545-1325881732.png][]

转载于:https://www.cnblogs.com/zzzzw/p/10411017.html

[593690-20190221105225545-1325881732.png]: /images/20211223/99fcecf281e44d5e831ce1475ef20a42.png

发表评论取消回复

表情：

评论列表（有 0 条评论，352人围观）

还没有评论，来说两句吧...

相关阅读

相关 React选择函数组件还是class组件

在 React 中，你可以使用两种不同类型的组件：函数组件和类组件。每种组件类型都有其优势和适用场景，你可以根据项目需求和个人偏好进行选择。函数组件：函数组件是 Rea

向右看齐/ 2024年03月23日 22:34/ 0 赞/ 74 阅读

相关 React组件化-类组件和函数组件介绍

文章目录 React组件化开发组件化开发思想 React的组件化 React中类组件 React函数组件

痛定思痛。/ 2023年10月02日 20:52/ 0 赞/ 32 阅读

相关 React组件通信（父子组件传值）

1、父组件传值子组件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

偏执的太偏执、/ 2023年07月19日 15:27/ 0 赞/ 90 阅读

相关 React函数组件和class组件以及Hooks

React函数组件和class组件以及Hooks 作者烦恼会解决烦恼我们都知道定义组件有两个要求： 1. 组件名称必须以大写字母开头 2. 组件的返回

爱被打了一巴掌/ 2023年07月03日 08:08/ 0 赞/ 15 阅读

相关 react 元素标签组件_如何获取React组件的元素

react 元素标签组件 JSX is an amazing pseudo-language for React, and if I'm honest, it's what

亦凉/ 2023年02月21日 14:28/ 0 赞/ 19 阅读

相关 react组件通讯

React 的组件可以定义为 class 或函数的形式函数组件 <script type="text/babel"> function HelloM

Dear 丶/ 2023年01月13日 01:51/ 0 赞/ 257 阅读

相关 react组件通信

一、状态机setState是一个异步操作 setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setS

末蓝、/ 2022年12月05日 10:20/ 0 赞/ 225 阅读

相关 React组件API

虚拟DOM React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到

悠悠/ 2022年06月16日 13:09/ 0 赞/ 197 阅读

相关 react篇章-React 组件-复合组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 R

叁歲伎倆/ 2021年12月24日 15:33/ 0 赞/ 353 阅读

相关 react 封装通用组件之table组件

react 封装通用组件之table组件 > 工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯

浅浅的花香味﹌/ 2021年12月01日 11:38/ 0 赞/ 1128 阅读