javascript - React, styled-components - 在导入的样式 div 上设置 props

Question

我正在尝试编写一个 React 组件，在其中我可以根据传递的 props 加载不同样式的 div-s 并渲染它们。这是我到目前为止的代码:

组件:

import React, { Component } from "react";
import s, { keyframes } from "styled-components";
import PropTypes from "prop-types";

import { jumpyRotation } from "../animations/jumpyRotation.js";
import { normalRotation } from "../animations/normalRotation.js";

import { baseShape } from "../shapes/base";

const animations = {
  jumpyRotation: jumpyRotation,
  normalRotation: normalRotation
};

const shapes = {
  square: baseShape
};

class Loader extends Component {
  render() {
    const {
      size = "14px",
      color = "#000",
      fontSize = "14px",
      loaderText = "Loading...",
      length = "4s",
      animation = "jumpyRotation",
      shape = "square"
    } = this.props;

    const styledShape = shapes[shape];

    styledShape.attrs.size = size;
    styledShape.attrs.color = color;
    styledShape.attrs.animation = animation;
    styledShape.attrs.length = length;

    return (
      <LoaderStyles
        length={length}
        animation={animations[animation]}
        fontSize={fontSize}
        color={color}
        size={size}
      >
        styledShape
        <span className="loader-text">{loaderText}</span>
      </LoaderStyles>
    );
  }
}

Loader.propTypes = {
  size: PropTypes.string, // Size in a valid CSS unit
  color: PropTypes.string, // A valid CSS color, changes both loader and text
  fontSize: PropTypes.string, // Size in a valid CSS unit
  loaderText: PropTypes.string, // Text displayed under the loader
  length: PropTypes.string, // The length of animation in a valid CSS unit
  animation: PropTypes.string // The name of the animation
};

const LoaderStyles = s.div`
  font-size: ${props => props.fontSize};
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding: ${props => props.fontSize};
  .loader-text {
    color: ${props => props.color};
  }
`;

export default Loader;

样式组件../shapes/base:

import s from "styled-components";

export const baseShape = s.div`
  margin: ${props => props.size};
  height: ${props => props.size};
  width: ${props => props.size};
  background-color: ${props => props.color};
  animation: ${props => props.animation} ${props =>
  props.length} linear infinite;
`;

现在根据styled component docs ，使用语法应该可以工作，但我收到以下错误:

TypeError: Cannot set property 'size' of undefined

即使浏览器调试器将 styledShape 显示为 styled.div

Answer 1

React 只能识别以大写字母开头的组件，因此解决方案是这样的(省略了 anwser 中不相关的代码):

样式组件:

import s from "styled-components";

export const baseShape = s.div`
  margin: ${Brops => props.size};
  height: ${props => props.size};
  width: ${props => props.size};
  background-color: ${props => props.color};
  animation: ${props => props.animation} ${props =>
  props.length} linear infinite;
`;

组件:

import React, { Component } from "react";
import s from "styled-components";

import { BaseShape } from "../shapes/base";

const shapes = {
  square: BaseShape
};

class Loader extends Component {
  render() {
    const {
      size,
      color,
      animation,
      shape
    } = this.props;

    const ShapeDiv = shapes[shape];

    return (
      <ShapeDiv size={size} color={color} animation={animation} shape={shape}/>
    );
  }
}

export default Loader;