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()并且可能没有正确实施但是没有成功。我查看的所有示例都使用了状态组件，因此尝试使用.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。

Answer 2

只是做：

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

或箭头功能：

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

Answer 3

您还可以这样写：

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

功能组件

3 个答案: