【问题标题】:How to add border radius on react-jdenticon component?如何在 react-jdenticon 组件上添加边框半径?
【发布时间】:2021-12-07 06:31:52
【问题描述】:

我用过react-jdenticon

尝试添加边框半径,但似乎无法在 svg 或 canvas 元素上采用 css 样式。

对此有何建议?

import React from 'react';
import Jdenticon from 'react-jdenticon';

function Example(){
  return(<Jdenticon size="48" value="Hello World" />);
}

【问题讨论】:

    标签: javascript reactjs identicon


    【解决方案1】:

    上述解决方案适用于jdenticon

    但是react-jdenticon 有什么解决方案,也许我们可以扩展

    <Jdenticon size="48" value="Hello World" 'pass classname here'/>
    

    【讨论】:

      【解决方案2】:

      如果您想自定义 SVG 图像的 css 样式。为此,我建议您使用 jdenticon 包。使用jdenticon 使用以下代码构建自定义组件。现在您可以将 CSS 类或任何样式添加到您想要添加的 SVG 元素。

      import React, { useRef, useEffect } from 'react';
      import jdenticon from 'jdenticon';
      
      const Jdenticon = ({ value = 'test', size = '100%', className }) => {
        const icon = useRef(null);
        useEffect(() => {
          jdenticon.update(icon.current, value);
        }, [value]);
      
        return (
          <div>
            <svg data-jdenticon-value={value} height={size} ref={icon} width={size} className={className} />
          </div>
        );
      };
      

      现在使用,可以这样使用。

      function Usage(){
        return(<Jdenticon size="48" value="Hello World", className="custom-name" />);
      }
      

      【讨论】:

      • 我们可以用import Jdenticon from 'react-jdenticon';代替import jdenticon from 'jdenticon';
      • 基本上没有,现在您直接使用jdenticon 库。所以从你的代码中删除react-jdenticon。并且只安装jdenticon
      • 不使用useRef and useEffect 可以创建另一个示例吗?
      • 你的意思是使用类组件?
      • 有类组件