import React, {Component} from 'react';
import Navbar from "./Navbar";

class App extends Component {

  render() {
    // 当对象的属性值和 props 的键一样的时候, 可以使用展开运算符
    const indexProps = {
      title: '首页',
      leftShow: false
    }

    return (
      <div>
        <div>
          <Navbar {...indexProps}></Navbar>
        </div>
        <div>
          <Navbar title='列表' leftShow={true}></Navbar>
        </div>
        <div>
          <Navbar title='购物车' leftShow={true}></Navbar>
        </div>
      </div>
    );
  }
}

export default App;
Copy

import React, {Component} from 'react';

class Navbar extends Component {
  render() {
    const {title, leftShow} = this.props
    return (
      <div>
        {leftShow && <button>返回</button>}
        {title}
        <button>home</button>
      </div>
    );
  }
}

export default Navbar;
Copy

import React, {Component} from 'react';
import propTypes from 'prop-types';

class Navbar extends Component {
  // 属性名不能改变
  static propTypes = {
    title: propTypes.string,
    leftShow: propTypes.bool
  }

  // 设置默认值
  static defaultProps = {
    leftShow: true
  }

  ...
}

export default Navbar;Copy

本文章首发在 LearnKu.com 网站上。