如何以编程方式设置组件道具？

Question

我有用 vite 构建的 React 应用程序。 我使用 React.lazy 和 svgr

延迟加载 SVG

const US = React.lazy(() => import('../../assets/icons/flags/us.svg?react'));

此导入返回一个我可以显示的组件

<Suspense fallback={null}>
   <US />
<Suspense>

由于 US 是 React 组件，它是一个 SVG，所以我想更改它的一些 props（HTML 属性），如宽度、高度和填充。

当我尝试时

US.props.width = 200

我收到错误 props is read only。 我尝试了一些方法，但没有一个对我有用，我想知道它是否可行。

我现在所做的，我用一个简单的 div 包装组件，并在 ref 中应用所有道具：

<div ref={ref => ref.querySelector('svg').setAttribute('width', width)}>
   <US />
</div>

这可行，但如果可能的话，我更喜欢更干净的东西。

谢谢！

Answer 1

您可以在问题中添加更多信息，例如“通过单击更改 SVG 样式或其他类似的内容”。假设您想在单击或其他事件时更改 SVG 样式，那么您可以将 props 传递给您的 SVG 反应组件，如下所示：

<US width={'20px'} color={'black'} />

现在，进入 US 组件，您可以访问这些道具并渲染更改您的 SVG 样式，如下所示：

const US= ({ width, color }) => {
  return (
    <svg width={width} xmlns="http://www.w3.org/2000/svg" stroke={color}>

一些代码....

）；

我希望它有帮助..