相关疑难解决方法(0)

我正在使用,webkitRequestAnimationFrame但我在一个对象内部使用它时遇到了麻烦.如果我传递this它将使用的关键字window,我找不到使用指定对象的方法.

例:

Display.prototype.draw = function(){
  this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
  //Animation stuff here.

  window.webkitRequestAnimationFrame(this.draw);
};

我也试过这个,但无济于事:

Display.prototype.draw = function(){
  this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
  //Animation stuff here.

  var draw = this.draw;
  window.webkitRequestAnimationFrame(draw);
};

这在React版本0.12中运行得非常好:

componentDidMount: function () {
    var dom = this.getDOMNode();
}

该变量dom获取渲染组件的实际DOM节点.但是,将其转换为React 0.13并不能按预期工作:

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

我试过React.findDOMNode(this)哪个也行不通.基本上我只是试图获取渲染函数渲染的顶级dom节点而不使用ref.这可能吗？

通过使用setTimeout方法调用函数而不是直接调用函数,可以在javascript中避免堆栈溢出吗？我对setTimeout的理解是它应该启动一个新的callstack.当我查看chrome和IE的callstack时,似乎setTimeout调用正在等待函数调用返回.

这只是调试器的属性还是我的理解有缺陷？

编辑

虽然下面提供的答案是正确的,但我遇到的实际问题与我调用setTimeout(aFunction(),10)的事实有关,因为括号因此立即评估aFunction.这个问题把我排除在外.

如果一段文本大于它的容器，我试图在React中设置一个选取框，但即使组件已渲染，我也无法获得正确的容器宽度。

我读了另一个答案React“渲染后”代码？您必须使用我正在尝试的requestAnimationFrame，但仍无法正常工作。

如果我记录容器的宽度，它会显示147px的宽度，该宽度是在样式表中使用min-width设置的，但是正确的宽度应该是320px，当屏幕的min-width是600px时，使用媒体查询可以设置该宽度。

这是一个子组件，如果有任何区别，并且iFrame的宽度超过600像素，则父组件将呈现在iFrame中。

JS：

module.exports = React.createClass({

  componentDidUpdate: function () {
    // Setup marquee
    this.initMarquee();
  },

  render: function () {
    // Setup marquee
    this.initMarquee();

    var artistName = this.props.artist.artistName;
    var trackName  = this.props.track.trackName;

    return (
      <div className="MV-player-trackData no-select" ref="mvpTrackData">
        <div className="MV-player-trackData-marquee-wrap" ref="mvpMarqueeWrap">
          <div className="MV-player-trackData-marquee" ref="mvpMarquee">
            <a className="MV-player-trackData-link no-select" href={this.props.storeUrl} target="_blank">
              <span id="mvArtistName">{artistName}</span> &ndash; <span id="mvTrackName">{trackName}</span>
            </a>
          </div>
        </div>
      </div>
    )
  },

  initMarquee: function () {
    if ( typeof requestAnimationFrame !== 'undefined' ) {
      //store a this ref, and …

我不知道如何使弹出窗口起作用，如：https ://getbootstrap.com/docs/4.0/components/popovers/ 。

文档讨论了popover支持是一个插件，并且也需要工具提示插件，所以我已经修改了我的代码webpack.config.js以添加这两个插件，现在看起来像这样：

...
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
  Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
  Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
}),
...

我还没有发现关于自举插件概念的任何文件，因此上述两行Popover，并Tooltip从搜索来了，不知道他们是正确的。

该文档指出：

由于性能原因，弹出窗口是可选的，因此您必须自己对其进行初始化。

但是我不知道该怎么做。

文档显示以下用于初始化弹出窗口的代码：

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

但是我不知道该怎么做- popover()我的元素上没有要调用的功能-这是如何工作的？

这是我的尝试使用弹出框的代码的示例：

render(){

  ...

  <span>
    Summary info
    <button 
      type="button" className="btn btn-sm" 
      data-toggle="popover" title="Popover title" 
      data-content="The popover Content"
    >
      Show popover
    </button>        
  </span>

  ...
}

如何在React应用程序的上下文中使Bootstrap V4弹出功能起作用？具体来说-如何“初始化”弹出窗口？

我正在使用Typescript 2.3，React 16，Bootstrap 4（没有react-bootstrap样式库）。

请注意，react-bootstrap仅支持Bootstrap V3，而reactstrap太不稳定，我不想使用它。