小白教程
所有教程
关于
Search
172.70.130.156
172.70.130.156
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“React 组件”的源代码
本页内容
上一节:
React_JSX
下一节:
React_State(状态)
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:React 组件}}[[Category:React 教程|5]] = React 组件 = 本章节我们将讨论如何使用组件使得我们的应用更容易来管理。 接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage: == React 实例 == <sample title="" desc="" lang="html" hererun="1"> function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage />; ReactDOM.render( element, document.getElementById('example') ); </sample> <run name=""> <!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> </run> === 实例解析: === 1、我们可以使用函数定义了一个组件: <pre>function HelloMessage(props) { return <h1>Hello World!</h1>; }</pre> 你也可以使用 ES6 class 来定义一个组件: <pre>class Welcome extends React.Component { render() { return <h1>Hello World!</h1>; } }</pre> 2、'''const element = <HelloMessage />''' 为用户自定义的组件。 <blockquote>注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。 </blockquote> 如果我们需要向组件传递参数,可以使用 '''this.props''' 对象,实例如下: == React 实例 == <sample title="" desc="" lang="html" hererun="1"> function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="xiaoBai"/>; ReactDOM.render( element, document.getElementById('example') ); </sample> <run name=""> <!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 {props.name}!</h1>; } const element = <HelloMessage name="xiaoBai"/>; ReactDOM.render( element, document.getElementById('example') ); </script> </body> </html> </run> 以上实例中 '''name''' 属性通过 props.name 来获取。 <blockquote>注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。 </blockquote> == 复合组件 == 我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。 以下实例我们实现了输出网站名字和网址的组件: == React 实例 == <sample title="" desc="" lang="html" hererun="1"> 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.xiaobai.wang" /> <Nickname nickname="xiaoBai" /> </div> ); } ReactDOM.render( <App />, document.getElementById('example') ); </sample> <run name=""> <!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 App() { return ( <div> <Name name="小白教程" /> <Url url="http://www.xiaobai.wang" /> <Nickname nickname="xiaoBai" /> </div> ); } ReactDOM.render( <App />, document.getElementById('example') ); </script> </body> </html> </run> 实例中 App 组件使用了 Name、Url 和 Nickname 组件来输出对应的信息。
返回至“
React 组件
”。
上一节:
React_JSX
下一节:
React_State(状态)