React 组件 | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
React 教程
React 教程
React 安装
React 元素渲染
React JSX
React 组件
React State(状态)
React Props
React 事件处理
React 条件渲染
React 列表 & Keys
React 组件 API
React 组件生命周期
React AJAX
React 表单与事件
React Refs
React JSX
React State(状态)
React 组件
本章节我们将讨论如何使用组件使得我们的应用更容易来管理。
接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：
React 实例
function HelloMessage(props) {
return <h1>Hello World!</h1>;
const element = <HelloMessage />;
ReactDOM.render(
element,
document.getElementById('example')
);
尝试一下 »
实例解析：
1、我们可以使用函数定义了一个组件：
function HelloMessage(props) {
return <h1>Hello World!</h1>;
你也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
2、const element = <HelloMessage /> 为用户自定义的组件。
注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：
React 实例
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
尝试一下 »
以上实例中 name 属性通过 props.name 来获取。
注意，在添加属性时，
class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
以下实例我们实现了输出网站名字和网址的组件：
React 实例
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')
);
尝试一下 »
实例中 App 组件使用了 Name、Url 和 Nickname 组件来输出对应的信息。
React JSX
React State(状态)
4 篇笔记
写笔记
#0 丶小明 602***590@qq.com 35组件名不一定是用单标签，也可以是双标签
<HelloMessage />
可以写成如下代码：
<HelloMessage></HelloMessage>
XML 的重点有且仅有一个根标签。丶小明 丶小明 602***590@qq.com6年前 (2017-09-07)
#0 杨钟华 xdf***fdf@qq.com 61组件名内不能使用 style 样式，例如：假设该组建名为 <HelloMessage />，如果我们写成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中！那么我们应该把样式写在哪里呢? 我们应该把样式写在：
function HelloMessage(props) {
return <h1 style={{color:'red',textAlign:'center'}}>Hello World！</h1>;
或者
var myStyle = {color:'red',textAlign:'center'}
class HelloMessage extends React.Component {
render() {
return <h1 style={myStyle}>Hello World！</h1>;
杨钟华 杨钟华 xdf***fdf@qq.com6年前 (2018-06-12)
#0 hr hr1***391788@163.com 参考地址 45ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(template,targetDOM) 方法接收两个参数：
第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹，如 <div>；
第二个参数是插入该模板的目标位置。
若要为创建的某个元素增加 class 属性，不能直接定义 class 而要用 className，因为 class 是 javascript 中的保留字。例如给 input 添加 className 并更改样式：
<input type="text" className="userName" value={value}/>
.userName{background: yellow} // 在CSS样式中定义
同样可以定义行内样式，将所有的样式包裹在一个对象中，以类似变量的形式给 style 属性赋值，注意样式属性要用驼峰命名法表示，如: backgroundColor 而不是 background-color，fontSize 而不是 font-size：
<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>
另外可以直接将样式赋值给一个变量，把变量赋值给 style 属性，如下：
<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
let inputStyle = {
"backgroundColor":"yellow",
"color":"red"
};
ReactDOM.render(
<div>
<input type="text" style={inputStyle} value={value}/>
<button>{buttonName}</button>
</div>,
document.getElementById("container")
</script>hr hr hr1***391788@163.com 参考地址6年前 (2018-06-22)
#0 做自己的小太阳 251***315@qq.com 34对创建多个组件的代码，做了点小修改，帮助大家理解。
<WebSite name="菜鸟教程" site=" http://www.runoob.com" />，这种形式传入的 name 和 url 值，只能在 WebSit 组件中用 this.props.xxx 来使用。虽然原来的代码中，Name 和 Site 组件中也是以同样的形式使用的，但并不是因为这条语句的作用，而是因为 <Name name={this.props.name} /> <Link site={this.props.site} /> 。所以我特意将这几行代码做了修改，方便大家感受感受！
WebSite 组件中：
<Name title={this.props.name}/>
// 将this.props.name以title名称传给Name组件，Name通过this.props.title来使用其值
<Url site={this.props.url}/>
// 将this.props.url以site名称传给Name组件，Name通过this.props.site来使用其值
Name 组件中：
<h1>{this.props.title}</h1>
Site 组件中：
<a href={this.props.site} rel="nofollow">{this.props.site}</a>做自己的小太阳 做自己的小太阳 251***315@qq.com5年前 (2018-07-12)
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
正则表达式入门教程
·
Python lambda（...
·
Java 注释
·
Bootstrap5 消息...
·
Python 按字母顺...
·
Python 删除字符...
·
git restore 命令
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2023 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注