javascript - 将 defaultProps 与 withStyles 一起使用

Question

我正在使用 material-ui withStylers 和 defaultProps 创建一个组件，但是当我尝试使用组件的 props 时，在样式对象中，我从来没有得到我的默认 props 的值，只有在它出现时才得到值传递给组件。我的组件结构是这样的:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core";

const styles = theme => ({
    ClassTest: {
        anyAttr: props => console.log(props) 
    }
});

const Test = ({classes}) => {
    return (
        <span className={classes.ClassTest}/>
    );
};

Test.defaultProps = {
    val2: "hey"
};

Test.propTypes = {
    val1: PropTypes.bool.isRequired,
    val2: PropTypes.string,
};

export default withStyles(styles, { withTheme: true })(Test);

我是这样用的

<Test val1="Hello">

我希望控制台日志显示如下内容:

{
  classes: {...},
  val1: "Hello",
  val2: "hey"
}

但相反，我得到了这个

{
  classes: {...},
  val1: "Hello"
}

如果我这样调用组件:

<Test val1="Hello" val2="hey">

我明白了:

{
  classes: {...},
  val1: "Hello",
  val2: "hey"
}

那么，考虑到 defaultProps，样式对象不应该给出 props 的值？我做得对还是我错过了什么？

我正在使用以下版本:

"@material-ui/core": "^4.3.0",
"react": "^16.8.6",

我基于文档的这一部分
https://material-ui.com/styles/basics/#adapting-based-on-props

Answer 1

withStyles 将 Test 包装在高阶组件中，并且对 Test 的默认属性不可见。 withStyles 正在添加到 Test 的属性(注入(inject)一个 classes Prop )，所以 Test 的默认 Prop 可以直到 withStyles 完成它的工作后才能确定(例如，如果 Test 有一个默认的 classes Prop ，当​​ withStyles 提供类，但当未被withStyles 包装时可以利用默认值。

在下面的代码中，我演示了三种不同的方法:

1. 第一种是您尝试过的方法，但它不起作用，因为默认 Prop 对 withStyles 不可见。
2. 第二种方法将默认属性应用于 withStyles 返回的 HOC。
3. 第三种方法使用 makeStyles/useStyles 而不是 withStyles 这使得在初始组件上仍然可以使用默认 Prop 而不是HOC。

当 bgcolor 被显式指定(橙色)时，所有三种方法都有效，但只有方法 2 和 3 成功看到默认属性值。

import React from "react";
import ReactDOM from "react-dom";
import { withStyles, makeStyles } from "@material-ui/core/styles";

const styles = {
  test: {
    backgroundColor: props => props.bgcolor
  }
};

const useStyles = makeStyles(styles);

const ApproachThatDoesNotWork = ({ classes }) => {
  return <div className={classes.test}>ApproachThatDoesNotWork</div>;
};
ApproachThatDoesNotWork.defaultProps = {
  bgcolor: "lightgreen"
};
const StyledApproachThatDoesNotWork = withStyles(styles)(
  ApproachThatDoesNotWork
);

const DefaultPropsOnStyledHOC = ({ classes }) => {
  return <div className={classes.test}>DefaultPropsOnStyledHOC</div>;
};
const StyledDefaultPropsOnStyledHOC = withStyles(styles)(
  DefaultPropsOnStyledHOC
);
StyledDefaultPropsOnStyledHOC.defaultProps = {
  bgcolor: "pink"
};

const MakeStylesAndUseStyles = props => {
  const classes = useStyles(props);
  return <div className={classes.test}>MakeStylesAndUseStyles</div>;
};
MakeStylesAndUseStyles.defaultProps = {
  bgcolor: "lightblue"
};

function App() {
  return (
    <div className="App">
      <StyledApproachThatDoesNotWork />
      <StyledApproachThatDoesNotWork bgcolor="orange" />
      <StyledDefaultPropsOnStyledHOC />
      <StyledDefaultPropsOnStyledHOC bgcolor="orange" />
      <MakeStylesAndUseStyles />
      <MakeStylesAndUseStyles bgcolor="orange" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);