如何在 React 中重用具有不同 props 的组件？

Question

我有一个父组件，我需要多次重用一个名为 Chart 但具有不同道具的子组件，但发生的是第一个组件是唯一被修改的组件，并且还被最后一个组件的道具修改图表组件。

我知道中心号是通过组件的return修改的，但是useEffect里面的逻辑怎么实现呢？如果有人能帮助我，我是 React 的新手，谢谢。

代码

const Dashboard = () => {
  return (
    <>
      <div className="chartContainerMain">
        <div className="chartsContainer">
          <div className="chartContainer">
            <p className="nameChart">chart 1</p>
            <Chart color="red" number={45} /> ///// This is the component i need
            to reuse
          </div>

          <div className="chartContainer">
            <p className="nameChart">chart 2</p>
            <Chart color="blue" number={90} /> ///// This is the component i
            need to reuse
          </div>
        </div>
      </div>
    </>
  );
};

export default Dashboard;

//-------- COMPONENT CHART CODE ---------------[![enter image description here][1]][1]

import { useEffect } from "react";
import "./chart.css";

const Chart = ({ color, number }) => {
  useEffect(() => {
    let circle = document.querySelector(".circle");
    circle.style.strokeDasharray = `${number} 100`;
    circle.style.stroke = `${color}`;
  }, [color, number]);

  return (
    <>
      <div className="donut-chart">
        <svg viewBox="0 0 32 32">
          <circle className="circle" r="16" cx="16" cy="16" />
        </svg>
        <div className="donut-center">
          <p className="centerNumber">{number}%</p>
        </div>
      </div>
    </>
  );
};

export default Chart;

你可以看到这张图片 https://i.stack.imgur.com/762F6.png

Answer 1

您运行遇到的问题可能与您尝试使用 <Chart /> 组件修改 DOM 节点（document.querySelector(".circle")) 直接，特别是因为 document.querySelector(".circle") 将 return 它找到的第一个元素。相反，您的 <Chart /> 组件本身应该渲染该节点并根据道具应用您需要的任何样式。您可能根本不需要 useEffect 挂钩...

const Chart = ({ color, number }) => {
  return (
    <>
      <div className="donut-chart">
        <svg viewBox="0 0 32 32">
          <circle className="circle"
                  r="16"
                  cx="16"
                  cy="16"
                  style={{strokeDasharray: `${number} 100`, stroke: color}}/>
        </svg>
        <div className="donut-center">
          <p className="centerNumber">{number}%</p>
        </div>
      </div>
    </>
  );
};

export default Chart;

我不太确定您运行遇到的确切问题是什么，但根据您的问题和代码示例，希望这对您有所帮助，或者至少为您指明了正确的方向。

Answer 2

在你的情况下使用来自父级的道具的最简单方法是直接将它们注入 <cirlce style={{ strokeDasharray: `${number}, 100`, stroke: color }} /> 元素的内联样式并完全删除 useEffect。

你可以查看 react 样式的文档 https://reactjs.org/docs/dom-elements.html#style

如何在 React 中重用具有不同 props 的组件？

How can I reuse a component with different props in React?

css

reactjs

use-effect

use-state