React 组件中的 Switch 语句答案

【问题标题】：Switch statement in a React componentReact 组件中的 Switch 语句
【发布时间】：2019-03-08 05:11:46
【问题描述】：

尝试构造一个组件，该组件根据 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} />;
  }
};

它返回的道具是未定义的。我这样调用组件：

【问题讨论】：

从const Type = ( { props } )中删除花括号{}

标签： reactjs styled-components

【解决方案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;

  // ...
};

【讨论】：