React 组件中的 Switch 语句

Question

尝试构建一个组件，其中 returns 几个基于 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} />;
  }
};

返回的是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 语句

Switch statement in a React component

reactjs

styled-components