小编fra*_*nky的帖子

我无法弄清楚如何使用Immutable.js游标短路渲染React组件树的分支.

请看以下示例:

import React from 'react';
import Immutable from 'immutable';
import Cursor from 'immutable/contrib/cursor';

let data = Immutable.fromJS({
  things: [
    {title: '', key: 1},
    {title: '', key: 2}
  ]
});

class Thing extends React.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.thing.deref() !== nextProps.thing.deref();
  }

  handleChangeTitle(e) {
    this.props.thing.set('title', e.target.value);
  }    

  render() {
    return <div>
      <input value={this.props.thing.get('title')} 
        onChange={this.handleChangeTitle.bind(this)} />
    </div>;
  }
}

class Container extends React.Component {
  render() {
    const cursor = Cursor.from(this.props.data, 'things', newThings => {
      data.set('things', newThings);
      renderContainer();
    });

    const things = …

我正在使用React的PropTypes和Flow类型检查器,但是我无法获得可选的函数prop来传递类型检查.这是一个例子:

var Example = React.createClass({
  propTypes: {
    exampleFn: React.PropTypes.func
  },

  handleClick: function() {
    if (this.props.exampleFn) {
      this.props.exampleFn();
    }
  },

  render: function() {
    return <a onClick={this.handleClick}>Click here</a>;
  }
});

虽然我检查this.props.exampleFn不是null,但是对这个代码运行Flow的类型检查器会给我错误

call of method exampleFn
Function cannot be called on possibly null or undefined value

我试过,例如不同的变化
if (this.props.exampleFn !== null && this.props.exampleFn !== undefined) {...}
或
this.props.exampleFn && this.props.exampleFn()
等知道我们正在防范可能为null /未定义的值,但我无法找到任何工作.当然,改变道具类型会React.PropTypes.func.isRequired导致没有错误,但我想保持这个道具是可选的.

如何通过类型检查获得可选的函数prop？