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

【问题标题】：How can I reuse a component with different props in React?如何在 React 中重用具有不同 props 的组件？
【发布时间】：2022-01-03 08:12:37
【问题描述】：

我有一个父组件，我需要多次重用一个名为 Chart 的子组件，但使用不同的 props，但发生的情况是第一个组件是唯一一个被修改的组件，并且还被最后一个 Chart 组件的 props 修改.

我知道中心数是通过组件的返回来修改的，但是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

【问题讨论】：

标签： css reactjs use-effect use-state

【解决方案1】：

您遇到的问题可能与您尝试使用<Chart /> 组件直接修改DOM 节点（document.querySelector(".circle")）有关，尤其是因为document.querySelector(".circle") 将返回第一个它找到的元素。相反，您的 <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;

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

【讨论】：

天哪！解决方案比我预期的要简单。不知道这样可以直接注入样式，非常感谢。

【解决方案2】：

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

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

【讨论】：

完全可以这样工作，非常感谢老兄！！