在反应中定义可选propTypes的最佳方法是什么？

Question

I have an optional propType

static defaultProps = {
   onSort: undefined, // undefined | () => {}
}

If undefined, we will check for undefined before the function is called.

_handleSort = () => {
   this.props.onSort && this.props.onSort()
}

So, how do I handle the propType of type Function | undefined Function | undefined . Should I check for undefined before calling the function or define a default function () => {}

Answer 1

static propTypes = {
  onSort: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.any
  ])
}

Then check if onSort exist.

if (this.props.onSort) {
  //do something
}

OR

Define the propTypes like this:

static propTypes = {
  onSort: PropTypes.func
}

then have a default for onSort like so:

static defaultProps = {
   onSort: () => null
}

Answer 2

This issue suggests defining a default function as you have indicated above: https://github.com/yannickcr/eslint-plugin-react/issues/1067

Cmp.defaultProps = {
    onChange: () => {}
}

However, I am still trying to get this to work. I'd be interested if you have any luck.

Answer 3

static defaultProps = {
  onSort: PropTypes.func,
}
if(this.props.onSort){
  //do something
}

What about this? So you're right with checking the property before calling/using it.