简介

在flow-router中，需要配合使用react-mounter来加载react组件，官方文档中给出了两种写法，随着react的发展，有些可能会报错．

第一种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content()}
      </main>
    </div>
);

mount(MainLayout, {
  content: () => (<WelcomeComponent name="Arunoda" />)
});

现在需要使用如下格式,特别是this.props.content()，不然会报错：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class AppLayout extends Component {
  render() {
    return (
        <div>
          <Header />
          {this.props.content()}
          <Footer />
        </div>
    );
  }
}

AppLayout.propTypes = {
  content: PropTypes.func.isRequired,
};

//在路由文件中，调用
mount(AppLayout, {
    content: () => (<Welcome />),
 });

注意，它的类型为PropTypes.func,是个函数，其他类型会报错；

另一种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default class AppLayout extends Component {
  render() {
    return (
        <div>
          <Header />
          {this.props.content}
          <Footer />
        </div>
    );
  }
}

AppLayout.propTypes = {
  content: PropTypes.element.isRequired,
};

//在路由文件中，调用
mount(AppLayout, {
    content: <Welcome />,
 });

注意，这里它的类型为PropTypes.element；

所有PropTypes类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 基本类型，默认可传可不传
React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string

// 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组
React.PropTypes.node

//react元素
React.PropTypes.element

 // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定形状参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 以后任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }