React 组件
本章节我们将讨论如何使用组件使得我们的应用更容易来管理。
接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage:
React 实例
尝试一下 »
实例解析:
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 实例
尝试一下 »
以上实例中 name 属性通过 props.name 来获取。
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
复合组件
我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。
以下实例我们实现了输出网站名字和网址的组件:
React 实例
尝试一下 »
实例中 App 组件使用了 Name、Url 和 Nickname 组件来输出对应的信息。
丶小明
602***590@qq.com
组件名不一定是用单标签,也可以是双标签
可以写成如下代码:
XML 的重点有且仅有一个根标签。
丶小明
602***590@qq.com
杨钟华
xdf***fdf@qq.com
组件名内不能使用 style 样式,例如:假设该组建名为 <HelloMessage />,如果我们写成:<HelloMessage style={{color:'red',textAlign:'center'}}/> 这样,那么该组件名是无 style 样式的,也就是说我们刚写的 style 样式,是无效的,因此我们不能把样式写在该组件中!那么我们应该把样式写在哪里呢? 我们应该把样式写在:
或者
杨钟华
xdf***fdf@qq.com
hr
hr1***391788@163.com
参考地址
ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render(template,targetDOM) 方法接收两个参数:
若要为创建的某个元素增加 class 属性,不能直接定义 class 而要用 className,因为 class 是 javascript 中的保留字。例如给 input 添加 className 并更改样式:
同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给 style 属性赋值,注意样式属性要用驼峰命名法表示,如: backgroundColor 而不是 background-color,fontSize 而不是 font-size:
另外可以直接将样式赋值给一个变量,把变量赋值给 style 属性,如下:
hr
hr1***391788@163.com
参考地址
做自己的小太阳
251***315@qq.com
对创建多个组件的代码,做了点小修改,帮助大家理解。
<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 组件中:
Site 组件中:
做自己的小太阳
251***315@qq.com