功能组件中的默认功能道具

Question

因此,我正在查看几个SO问题,每个示例都与基于类的组件有关,而不是功能组件.

所以我有一个ListContainer渲染的容器,List我正在通过toggleDrawer().我无法定义toggleDrawer()的List.defaultProps

ListContainer.jsx

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

class ListContainer extends Component{
  constructor(props){...}
  const toggleDrawer = () => {...}
  render(){
    return(
      <List data={data} toggleDrawer={toggleDrawer}/>
    )
  }
}

...export statement...

List.jsx

import React from 'react';
import PropTypes from 'prop-types';

function List(props){
  const { data, toggleDrawer } = props;
  const openDrawer = () => toggleDrawer();
  const renderListItems = (items) => {//renders a list};

  return(
    <ul>{renderListItems(data)}</ul>
  )
}

List.propTypes = {
  toggleDrawer: PropTypes.func,
};

List.defaultProps = {
  toggleDrawer: <<<<<<<<<<<<<<<< Not sure how to define toggleDrawer() here
}

...export statement...

我遇到的问题是我尝试过使用getDefaultProps()它可能没有正确实现但是没有用.我所看到的所有示例都使用了State组件,因此尝试使用.bind(this)或者this.toggleDrawer.this(bind)我尝试过的任何其他示例都不起作用.

我在这里错过了什么？或者只是拥有更好的做法toggleDrawer: PropTypes.func.isRequired.这确实消除了ESLint错误,但我不是100%总是需要该函数

Answer 1

你可能想要的是一个noop:

List.defaultProps = { toggleDrawer: () => {} };

这样做的好处是,this.props.toggleDrawer即使没有指定任何值,您也可以确定它是一个函数,这意味着您可以安全地调用它而无需检查.另一种方法是将默认值设置为null,然后在调用之前检查prop是否为函数:

if(typeof this.props.toggleDrawer === 'function') { /* call function */ }

对于记录,定义另一个openDrawer()简单调用的callback()没有多大意义toggleDrawer.你也可以toggleDrawer直接打电话.