Question

我有一个使用默认道具的React组件：

class MyComponent extends Component {
  constructor(props) {
    console.log('props', props);
    super(props);

// rest of code here

}

MyComponent .defaultProps = {
  __TYPE: 'MyDateRange',
};

当我使用该组件时，没有传递任何道具，props的控制台日志会显示默认的道具，就像应该的那样。

现在，当我想传递一个额外的道具（在这种情况下为函数）时，像这样：

<MyComponent onEnterKey={() => console.log('snuh')}/>

props的控制台日志仅显示onEnterKey功能。

我该怎么做才能允许MyComponent使用默认的道具和接受功能？我尝试向MyComponent的构造函数添加另一个参数，但这不起作用。

Answer 1

我尝试过了，并且正在工作：

import React from "react";
import { render } from "react-dom";

class MyComponent extends React.Component {
  constructor(props) {
    console.log("props", props);
    super(props);
  }

  render() {
    return null;
  }
}

MyComponent.defaultProps = {
  __TYPE: "MyDateRange"
};

render(
  <MyComponent onEnterKey={() => console.log("snuh")} />,
  document.getElementById("app")
);

您可以在这里看到它：https://codesandbox.io/s/wkw0k0j5o8

Answer 2

您可以像这样将defaultProp放在构造函数之外的类上：

class MyComponent extends Component {
  constructor(props) {
    console.log("props", props);
    super(props);
  }
  render() {
    return <div> test </div>;
  }
}

MyComponent.defaultProps = {
  __TYPE: "MyDateRange"
};

或者，您可以将defaultProps作为类的静态属性：

class MyComponent extends Component {
  static defaultProps = {
    __TYPE: "MyDateRange"
  };
  constructor(props) {
    console.log("props", props);
    super(props);
  }
  render() {
    return <div> test </div>;
  }
}

React-将函数传递给具有默认道具的组件

2 个答案: