Question

尝试构造一个组件，该组件将基于prop返回几个不同样式的组件。这是我得到的：

  const Type = ({ props }) => {
  const { right, center } = props;

  switch (props) {
    case props.paragraph:
      return <StyledParagraph right={right} center={center} {...props} />;
    case props.h1:
      return <StyledHeadingOne right={right} center={center} {...props} />;
    case props.h2:
      return <StyledHeadingTwo right={right} center={center} {...props} />;
    case props.h3:
      return <StyledHeadingThree right={right} center={center} {...props} />;
    case props.h4:
      return <StyledHeadingFour right={right} center={center} {...props} />;
    case props.h5:
      return <StyledHeadingFive right={right} center={center} {...props} />;
    case props.h6:
      return <StyledHeadingSix right={right} center={center} {...props} />;
    default:
      return <SetTypeError right={right} center={center} {...props} />;
  }
};

返回道具未定义。我这样称呼组件：

Answer 1

通过编写({ props })，您正在从props对象解构props属性，该属性是组件的第一个参数，等效于以下内容：

const Type = (param) => {
  const props = param.props;
  const { right, center } = props;

  // ...
};

只需编写(props)即可将props对象命名为props，它将按预期工作。

const Type = (props) => {
  const { right, center } = props;

  // ...
};

React组件中的switch语句

1 个答案: