我有一个父组件，我用它来将props（即backgroundColor）传递给子组件（<LivePortfolioGraph />）。

在我的子组件中，我有一个依赖数组，每次从父组件 ie ( props.backgroundColor)更改颜色时都会重新渲染。

现在我不想在每次渲染时创建一个新图表，如果图表存在，只需应用颜色选项。

真的很感激任何帮助！谢谢。

父组件

    const Main = (props) => {
    
      const [backgroundColor, setbackgroundColor] = useState('#141d27');
    
     const g = useRef(null);
    
    return (
    
     <div ref={g} className="FinancialChartIntro" >
    
        <LivePortfolioGraph g={g} backgroundColor={backgroundColor} />
    
        </div> 
    
    )
}

子组件

const  LivePortfolioGraph = (props) => {

const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);


useEffect( ()=> {

const handleStyle = _debounce(() => { chart.applyOptions({layout: {backgroundColor:props.backgroundColor  } }); }, 100)

window.addEventListener("input", handleStyle); 


const chart = createChart(props.g.current, options );


// Clean Up
return () => {


window.removeEventListener('input', handleStyle);

}



}, [props.backgroundColor])

更新 我找到了一种删除子节点（图表重复）的hacky方法。它像疯了一样减慢了页面的速度，我什至不想使用它。仍在尝试寻找其他解决方案。

> if(props.g.current.childNodes.length > 2) {
> props.g.current.removeChild(props.g.current.childNodes[2])  }