Canvas 的可重用 React 组件不会使用其道具呈现 canvas

Question

我正在尝试创建一个可重用的有状态组件（它不应该是功能组件）。我需要在运行时添加这个组件，所以在我的应用程序中，我有一个组件数组 (CanvasComponent) 在我的状态下呈现组件列表。我还生成一个随机大小来渲染 canvas 的大小。当我创建第二个 canvas 时出现问题，奇怪的是它只渲染一次。我在 ChartJS 中遇到了这个问题，因为我的代码库非常大，所以我决定通过一个示例来简化它。

但是，如果您取消对 Array 中的 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, 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

Answer 1

我认为您的问题是您以编程方式呈现 canvas 组件。如果首次加载页面时某些内容不存在，则事件侦听器不会主动寻找它。

我确信有比我的更优雅的解决方案，但我倾向于通过编写类似的东西来解决这个问题。

state={ updated: false}


componentDidMount(){
this.setState({updated:true})
}

更新状态会强制重新渲染，事件侦听器将知道要关注相关组件。

Answer 2

问题在这里，我会在这里分享，以防有人有同样的问题，可以找到它。

而不是

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

你应该写

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

我仍然不知道为什么，但它解决了问题。

Canvas 的可重用 React 组件不会使用其道具呈现 canvas

Reusable react component with Canvas doesn't render canvas with its props

reactjs

chart.js

react-component