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后立即调用此方法。这意味着您可以按类获取它并为其设置动画。

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组件初始化代码？

1 个答案: