react小知识
概述
有句话说得很好,代码是写给人看的,顺便让机器执行而已。所以我总结了一些写react不太注意的地方,供以后开发时参考,相信对其他人也有用。
组件封装
由于组件其实就是React.createElement()函数的语法糖,所以如果一个单一模块要导出多个组件时,可以把它封装在一个类里面。
import React from 'react';
const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />;
}
默认props(属性)
如果没有给prop传值,那么他默认为true。比如说下面的例子是等价的。
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
antd里面有很多组件的属性都是这种默认写法的,但是react官方并不建议使用这种类型,因为这会与ES6中的对象shorthand混淆 。ES6 shorthand 中 {foo} 指的是 {foo: foo} 的简写,而不是 {foo: true} 。
props.children
jsx表达式中可以包含开放标签和闭合标签,标签中的内容会被传递给props.children。这个props.children可以是字符串,也可以是js函数,还可以是组件。如果是this.props.children,则表示在渲染的时候传递给组件的所有子节点。
比如下面的react-router中的例子,详情请看Index Routes。
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h2>Repos</h2>
<ul>
<li><Link to="/repos/reactjs/react-router">React Router</Link></li>
<li><Link to="/repos/facebook/react">React</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
组件为函数
在一个module里面,不exports的组件最好写在外面。
//推荐写法,写在外面,很清晰
function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)}
</ul>
);
}
//不推荐
function TodoList() {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((message) => <li key={message}> {message} </li>)}
</ul>
);
}
条件渲染的优雅写法
由于false,null,undefined,和 true在渲染的时候会被忽略,所以可以如下优雅的写条件渲染。
//第一种
<div>
{showHeader && <Header />}
<Content />
</div>
//第二种
<div>
{props.messages.length &&
<MessageList messages={props.messages} />
}
</div>
需要注意的是,数值 0会被打印,所以一般写成如下形式:
//第一种
<div>
{!!showHeader && <Header />}
<Content />
</div>
//第二种
<div>
{props.messages.length > 0 &&
<MessageList messages={props.messages} />
}
</div>
propTypes
可以用propTypes来指定props的属性的类型,注意这只在开发模式中有效。
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
// 这里必须是一个元素,否则会发出警告。
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
}
MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
defaultProps
可以用defaultProps给props设置默认值,这样如果没有值的时候就不会报错了。
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// 指定 props 的默认值:
Greeting.defaultProps = {
name: 'Stranger'
};
// 渲染为 "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);