[关闭]
@1002522146 2018-06-06T09:00:45.000000Z 字数 1116 阅读 491

React 高级

react


React中文文档

深入 JSX

从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖。JSX代码:

  1. <MyButton color="blue" shadowSize={2}>
  2. Click Me
  3. </MyButton>

编译为:

  1. React.createElement(
  2. MyButton,
  3. {color: 'blue', shadowSize: 2},
  4. 'Click Me'
  5. )

使用 PropTypes 进行类型检查

PropTypes 输出了一系列的验证器,可以用来确保接收到的参数是有效的

  1. import React, {Component} from 'react'
  2. import PropTypes from 'prop-types'
  3. class App extends Component {
  4. //默认参数
  5. static defaultProps = {
  6. name: 1
  7. }
  8. render() {
  9. return (
  10. <div> {this.props.name}</div>
  11. )
  12. }
  13. }
  14. //isRequired 不能为空
  15. App.propTypes = {
  16. name: PropTypes.number.isRequired,
  17. }
  18. export default App

上下文(Context)

  1. const PropTypes = require('prop-types');
  2. class Button extends React.Component {
  3. render() {
  4. return (
  5. <button style={{background: this.context.color}}>
  6. {this.props.children}
  7. </button>
  8. );
  9. }
  10. }
  11. Button.contextTypes = {
  12. color: PropTypes.string
  13. };
  14. class Message extends React.Component {
  15. render() {
  16. return (
  17. <div>
  18. {this.props.text} <Button>Delete</Button>
  19. </div>
  20. );
  21. }
  22. }
  23. class MessageList extends React.Component {
  24. getChildContext() {
  25. return {color: "purple"};
  26. }
  27. render() {
  28. const children = this.props.messages.map((message) =>
  29. <Message text={message.text} />
  30. );
  31. return <div>{children}</div>;
  32. }
  33. }
  34. MessageList.childContextTypes = {
  35. color: PropTypes.string
  36. };
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注