@1002522146
2018-06-06T09:00:45.000000Z
字数 1116
阅读 491
react
从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖。JSX代码:
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
编译为:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
PropTypes 输出了一系列的验证器,可以用来确保接收到的参数是有效的
import React, {Component} from 'react'
import PropTypes from 'prop-types'
class App extends Component {
//默认参数
static defaultProps = {
name: 1
}
render() {
return (
<div> {this.props.name}</div>
)
}
}
//isRequired 不能为空
App.propTypes = {
name: PropTypes.number.isRequired,
}
export default App
const PropTypes = require('prop-types');
class Button extends React.Component {
render() {
return (
<button style={{background: this.context.color}}>
{this.props.children}
</button>
);
}
}
Button.contextTypes = {
color: PropTypes.string
};
class Message extends React.Component {
render() {
return (
<div>
{this.props.text} <Button>Delete</Button>
</div>
);
}
}
class MessageList extends React.Component {
getChildContext() {
return {color: "purple"};
}
render() {
const children = this.props.messages.map((message) =>
<Message text={message.text} />
);
return <div>{children}</div>;
}
}
MessageList.childContextTypes = {
color: PropTypes.string
};