文章目录
常见语法
批量传递props属性
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
特殊字符转换
<MyComponent message="<3" />
<MyComponent message={'<3'} />
传递字符串
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
默认传递属性值true
//如果你没有给属性传值,它默认为 true
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
传递控件内的子控件
在包含开始和结束标签的JSX表达式中,标记之间的内容作为特殊的参数传递:props.children
<MyComponent>Hello world!</MyComponent>
MyComponent 的 props.children 值将会直接是 “hello world!”。
循环JSX
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>
);
}
false、null、undefined 和 true 都是有效的子代,但它们不会直接被渲染
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
变量序列化
如果你想让类似 false、true、null 或 undefined 出现在输出中,你必须先把它转换成字符串 :
<div>
My JavaScript variable is {String(myVariable)}.
</div>
JSX 中动态选择组件
JSX只会在showHeader为true时渲染<Header />组件。
<div>
{showHeader && <Header />}
<Content />
</div>
下面的代码不会像你预期的那样运行,因为当 props.message 为空数组时,它会打印0:
<div>
{props.messages.length &&
<MessageList messages={props.messages} />
}
</div>
使用 PropTypes 进行类型检查
import PropTypes from 'prop-types';
class Greeting extends BaseComponent {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
// 为属性指定默认值:
Greeting.defaultProps = {
name: 'Stranger'
};
MyComponent.propTypes = {
// 你可以将属性声明为以下 JS 原生类型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何可被渲染的元素(包括数字、字符串、子元素或数组)。
optionalNode: PropTypes.node,
// 一个 React 元素
optionalElement: PropTypes.element,
// 你也可以在任何 PropTypes 属性后面加上 `isRequired`
// 后缀,这样如果这个属性父组件没有提供时,会打印警告信息
requiredFunc: PropTypes.func.isRequired,
// 任意类型的数据
requiredAny: PropTypes.any.isRequired,
};
使用 PropTypes.element 你可以指定只传递一个子代
MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
class SayHello extends BaseComponent {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// 这一行很关键
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert(this.state.message);
}
render() {
// 由于 `this.handleClick` 已经绑定至实例,因此我们才可以用它来处理点击事件
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}