Question

我正在尝试编写一个反应组件，我可以根据传递的道具加载不同的样式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：无法设置未定义的属性'size'

即使浏览器调试器将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;

react，styled-components - 在导入的样式div上设置道具

1 个答案: