javascript - 功能组件中的默认功能 Prop

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() 的回调( toggleDrawer )没有多大意义。 .您也可以直接调用 toggleDrawer直接地。