永远不会触发 onLoad 事件

Question

我试图弄清楚为什么onload事件永远不会被调用。一切都在没有错误的情况下构建，类似的 onLoad 事件在不同的组件中工作。 导出类工作扩展了 React.Component {

  constructor(props) {
    super(props);

    this.state = {
      allImgLoaded: false,
      boxHovered: false,
      projects: projects
    }
this.handleWorkLoad = this.handleWorkLoad.bind(this);
  }
componentWillMount() {
  window.scrollTo(0,0);
}
handleWorkLoad() {
  console.log("called");
  this.setState({
    allImgLoaded: true
  })
}
  render() {
    return (
    <div className={this.state.allImgLoaded ? "work" : "work invisible"} onLoad={this.handleWorkLoad}>
        </div>    
    );
  }
};
export default Work;

Answer 1

在 react 中，你有 componentDidMount 方法，它使你能够在组件完成加载阶段后运行特定的代码：

class Work extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
          allImgLoaded: false,
          boxHovered: false,
          projects: projects
        }
        this.handleWorkLoad = this.handleWorkLoad.bind(this);
    }
    componentWillMount() {
        window.scrollTo(0,0);
    }
    componentDidMount() {
        this.handleWorkLoad()
    }
    handleWorkLoad() {
        console.log("called");
        this.setState({
            allImgLoaded: true
        })
    }
    render() {
        return (
            <div className={this.state.allImgLoaded ? "work" : "work invisible"}>
            </div>    
        );
    }
};
export default Work;

反应中的div元素没有onLoad事件。