Question

我正在做一个组件反应，并将几个SVG图标的“ d”置于状态，记住SVG的内容很重，即我想将所有图标集中在一个组件中，但是让我感到担忧的是是不是一个不好的习惯。

export default class extends PureComponent {
constructor(props) {
    super(props);
    this.state = {
        plus: 'M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690...',
        tags: 'M 25.125 2 C 24.824219 2.003906 24.523438 2.023438 ...',
        todo_list: 'M 13.21875 5.375 L 7.375 12.84375 L 4.65625 10....',
        calendar_15: 'M 12 0 C 10.90625 0 10 0.90625 10 2 L 10 4 L 4 4 C...',
        user_menu_male: 'M 19.875 3.3125 C 15.183594 3.417969 12.214844...'
    };
}
render() {
    return (
        <svg
            className={this.props.className || ''}
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 50 50'
        >
            <path d={this.state[this.props.d]} />
        </svg>
    );
}

}

Answer 1

如果要在d个属性之间切换，则有两个选择。

我认为，执行此操作的经典方法是使用“使用”（请勿执行此操作）：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use;

React方式将是使用条件渲染。 https://reactjs.org/docs/conditional-rendering.html。例如：

export class SvgComponent extends React.Component {
     constructor(props) {
          super(props);
          this.state = {
              selectedSvg: 'firstSVG'
          }
     }
     render() {
         return (
             <svg>
                 <g>
                   {this.state.selected === 'firstSVG' &&
                        <path d="........."/> 
                    }
                   {this.state.selected === 'secondSVG' &&
                        <path d="........."/>
                    }

                 </g>
             </svg>
         )
     }
}

如果要执行此操作，请不要使用字符串；使用代表字符串的常量。例如export const FIRST = 'first svg'，并使用该常量作为参考。你会感谢你自己的。

适用于所有SVG的独特React组件

1 个答案: