使用useEffect和useRef绘制轻量级图，但会出现错误

Question

轻量级图表创建自己的画布，我无法在页面中对图进行居中，也无法将其移动到任何地方。我没用钩子就试了。它呈现图形，但它不会响应我分配给它的任何css，所以我开始使用useRef，但仍然不起作用。我知道"TypeError: t.appendChild不是一个函数“。我做错了什么？

import React, { useEffect, useState, useRef } from 'react';
import { createChart } from 'lightweight-charts';
import axios from 'axios';
import './Chart.css';

const Chart = ({stock}) => {

    const [chartData, setChartData] = useState([]);
    const chartRef = useRef();


    useEffect(() => {

            const chart = createChart(chartRef, { width: 500, height: 400 });
            const lineSeries = chart.addLineSeries();
            lineSeries.setData(stockChartDatas);
            chart.timeScale().fitContent();
    },[])


    return (
            <div className="chart-container">
            <h2>Interactive 5 Years Historical Daily Chart</h2>
            <div ref={chartRef} />
            </div>
        )
    }
export default Chart;

Answer 1

你只需要使用chartRef.current

const chart = createChart(chartRef.current, { width: 500, height: 400 });

看看这个https://codesandbox.io/s/hopeful-wright-wkn5q?file=/src/App.js