如何在 react-jdenticon 组件上添加边框半径？答案

【问题标题】：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 可以创建另一个示例吗？
你的意思是使用类组件？
有类组件