我正在尝试创建一个可重用的有状态组件（它不应该是功能组件）。我需要在运行时添加此组件，因此在我的应用程序中，我处于状态的组件数组（CanvasComponent）呈现了组件列表。我还生成一个随机大小来渲染画布的大小。创建第二个画布时会发生问题，奇怪的是它仅渲染一次。 我在ChartJS中遇到了这个问题，由于我的代码库很大，因此我决定通过一个示例来简化它。

但是，如果您在数组中取消注释CanvasComponent，则可以正常工作。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import CanvasComponent from './CanvasComponent';

class App extends React.Component {

  state = {
    canvasList: [
      // <CanvasComponent size={30}></CanvasComponent>,// <CanvasComponent size={50}></CanvasComponent>
    ]
  }


  handleclick = () => {

    const size = Math.floor(Math.random() * (100 - 50 + 1) + 50);
    const newCanvas = <CanvasComponent size={size}></CanvasComponent>

    this.setState({
      canvasList: [newCanvas,...this.state.canvasList]
  })

  }



  render() {
    return (
      <div classname="App">
        <button onClick={this.handleclick}>Add canvas</button>

        { this.state.canvasList.map((item,i) => {
            return <CanvasComponent {...item.props} key={i}></CanvasComponent>
        })}

      </div>
    );
  }
}

export default App;

和组件

import React from 'react'

class CanvasComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myCanvas = React.createRef();
    }

    componentDidmount() {
      const ctx = this.myCanvas.current.getcontext('2d');
      ctx.fillRect(0,100,100);
    }

    render() {
        console.log(this.props);
      return (
        <div>
            <p>Size should be {this.props.size}</p>
            <canvas ref={this.myCanvas} width={this.props.size} height={this.props.size} />
        </div>
      )
    }
}

export default CanvasComponent