Question

我正在尝试创建一个可重用的有状态组件（它不应该是功能组件）。我需要在运行时添加此组件，因此在我的应用程序中，我处于状态的组件数组（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, 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

我相信这里的问题是您正在以编程方式渲染画布组件。如果首次加载页面时不存在某些内容，则事件侦听器不会主动寻找它。

我敢肯定有比我的解决方案更好的解决方案，但是我倾向于通过写类似的东西来解决这个问题。

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组件不会使用其props渲染canvas

2 个答案: