React 高级

react

React中文文档

深入 JSX

从本质上讲，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 进行类型检查

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

上下文(Context)

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
};