Question

我有2个活动按钮和onClick我希望能够在按钮状态激活时显示我的svg组件，

所以我遇到了2个问题，如果我尝试将svg组件作为后台道具传递，那么我会收到错误＆＃39; Uncaught TypeError：无法将符号值转换为字符串＆＃39;

此外，我只有在活跃的情况下才需要渲染它，我不确定如何将此作为道具传递到这里？

如何有条件地渲染我的svg组件？

index.js

import React from "react";
import { render } from "react-dom";
import styled from "styled-components";
import "./icons.css";
import { TickOrange } from "./icons";

const Circle = styled.div`
  position: relative;
  &:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 7.5px;
    background: #ff00ff;
  }
  ${({ active }) =>
    active &&
    `
    url(${props => props.background});
    border: 2px solid black;
  `};
`;

export class App extends React.Component {
  constructor() {
    super();
    this.state = {
      active: false
    };
  }

  handleShowActive = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    return (
      <div>
        <Circle
          active={this.state.active}
          background={<TickOrange />}
          onClick={this.handleShowActive && <TickOrange />}
        />
        <Circle active={this.state.active} onClick={this.handleShowActive} />
        <TickOrange />
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

icons.js

import React from 'react'

export const TickOrange = () => (
  <svg x="0px" y="0px" viewBox="0 0 22 22">
    <circle className="tickOrangeSt0" cx="11" cy="11" r="10" />
    <polyline className="tickOrangeSt1" points="4.8,11 9.9,15.5 16.9,6.8 " />
  </svg>
);

icons.css

.tickOrangeSt0 {
  fill: #ee9157;
}
.tickOrangeSt1 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

将Component作为背景图像样式组件传递

0 个答案: