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

Question

所以我正在查看几个 SO 问题，每个示例都与基于 Class 的组件而不是功能组件有关。

所以我有一个呈现 List 的容器 ListContainer，我正在传递 toggleDrawer()。我无法在 List.defaultProps

中定义 toggleDrawer()

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()，也许它没有被正确实施，但没有奏效。我看过的所有示例都使用状态组件，因此尝试使用 .bind(this) 或 this.toggleDrawer.this(bind) 或我尝试过的任何其他示例都不起作用。

我在这里错过了什么？或者只使用 toggleDrawer: PropTypes.func.isRequired 会更好吗？这确实消除了 ESLint 错误，但我并不是 100% 始终需要该功能

Answer 1

就这样：

List.defaultProps = {
  toggleDrawer: function () {
    // enter code here 
  }
}

或箭头函数：

List.defaultProps = {
  toggleDrawer: () => {
    // enter code here 
  }
}

Answer 2

您可能想要的是 noop：

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

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

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

郑重声明，定义另一个仅调用 toggleDrawer 的回调 (openDrawer()) 没有多大意义。您也可以直接调用 toggleDrawer。

Answer 3

你也可以这样写简洁的风格:

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

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

Default function props in functional component

javascript

reactjs

react-proptypes