将 React 组件初始化代码放在哪里？

Question

我是新手 React.js，我正在研究带有动画的进度条，我发现我想在我的代码中实现这段代码，但我不知道将代码放在哪里.

我不知道把这个JavaScript代码放在哪里：

$(".progress-bar").animate({
 width: "70%"
}, 3000);

.

这是我的代码：

var React = require('react');
var Alert = require('react-bootstrap').Alert;
var VisualResults = React.createClass({
  render: function(){
    return(
      <div className="columns medium-12 large-12 small-centered" id="mainStyle">
        <div style={{marginTop: 30}}>
          <div className="progress">
            <div className="progress-bar progress-bar-striped active"
                role="progress-bar" style={{"width" : "0%"}}>

                {$(".progress-bar").animate({
                    width: "70%"
                }, 3000)}
            </div>
          </div>
        </div>
      </div>
    )
  }
});
module.exports = VisualResults;

Answer 1

您必须使用 componentDidMount 生命周期事件。这将在组件安装到 DOM 后立即调用。这意味着您可以通过 class 获取它并对其进行动画处理。

var React = require('react');
var Alert = require('react-bootstrap').Alert;
var VisualResults = React.createClass({
    componentDidMount() {
        $(".progress-bar").animate({width: "70%"}, 3000)
    },
    render: function () {
        return (
            <div className="columns medium-12 large-12 small-centered"
                 id="mainStyle">
                <div style={{marginTop: 30}}>
                    <div className="progress">
                        <div className="progress-bar progress-bar-striped active"
                             role="progress-bar" style={{"width" : "0%"}}>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = VisualResults;

将 React 组件初始化代码放在哪里？

Where do I put React component initialization code?

javascript

reactjs

react-bootstrap