相关疑难解决方法(0)

我想构建一个聊天系统,并在进入窗口时自动滚动到底部以及新消息进入时.如何在React中自动滚动到容器的底部？

我的父母渲染中有以下代码

<div>           
{
    this.state.OSMData.map(function(item, index) {
        return <Chart key={index} feature={item} ref="charts" />
    })
}
</div>

并在我的孩子图表下面的代码

<div className="all-charts">
    <ChartistGraph data={chartData} type="Line" options={options} />
</div>

我认为只有在加载所有子节点后才调用parentDidMount.但是这里父子的componentDidMount在child的componentDidMount之前被调用.

这是怎么回事？或者我做错了什么.

如果这是事情的工作方式,我如何检测从父项加载所有子组件的时间？

我在我的应用程序中使用Redux,在组件内部我希望在商店发生更改时滚动到特定的div标签.我有Redux部分工作,所以它触发componentDidUpdate()方法(我已经路由到这个compoennt视图).据我所知,问题是方法scrollIntoView()无法正常工作cos componentDidUpdate()有一个默认行为,滚动到顶部覆盖scrollIntoView().为了解决这个问题,我在setTimeout中包含了调用scrollIntoView()的函数,以确保不会发生这种情况.我想做的是调用一个preventDefault()或任何其他更优雅的解决方案,但我无法找到触发'scrollTop'事件的位置,我在这里查看了Doc:https://facebook.github. io/react/docs/react-component.html#componentdidupdate 和此函数中传递的参数是componentDidUpdate(prevProps,prevState),因为没有事件我不知道如何调用preventDefault()

我已经按照这个文档:https ://facebook.github.io/react/docs/refs-and-the-dom.html并尝试了人们在这里建议的不同方法:如何滚动div以在ReactJS中可见？

没有什么工作虽然这是我的代码,如果有人有任何提示,谢谢

class PhotoContainer extends React.Component {

  componentDidUpdate(){
    setTimeout(() => {
     this.focusDiv();
    }, 500);

  }
  focusDiv(){
    var scrolling = this.theDiv;
    scrolling.scrollIntoView();

  }

  render() {
    const totalList = [];
    for(let i = 0; i < 300; i += 1) {
        totalList.push(
            <div key={i}>{`hello ${i}`}</div>
        );
    }

  return (
      <div >
          {totalList}
          <div ref={(el) => this.theDiv = el}>this is the div I'm trying to scroll to</div>
      </div>
  )

}; }

当我试图滚动到"参考"时,我无法弄清楚出了什么问题.我一直在疯狂地搜索并找到了完全合理的网址,但它在我的场景中无效.

• https://github.com/yannickcr/eslint-plugin-react/issues/678
• http://codepen.io/takatama/pen/mVvbqx

我有一个使用react 15.4.2以及react-router 3.0.0的应用程序.我有一个路由到一个组件,该组件采用可选的路由参数,并尝试使用它来滚动到componentDidUpdate()上的元素.我尝试了几种不同的方法,但在遵循ref.scrollIntoView()的最新实现时,我收到错误...

scrollIntoView不是一个函数

我确保在componentDidUpdate()时存在"ref回调".

我只是缺少像使用.createClass()这样的东西,你在使用类定义时遇到的方法是缺少的还是我接近这个完全错误的方法？

我可以跳到使用一个包,但是这样的事情是无法理解当我像我一样可以打扰我的时候发生了什么.

代码已经过简化,以便在保持类似流程的同时展示问题.代码语法可能存在差异.

APP

const App = React.createClass({
    render() {
        return (
            <Router history={ appHistory }>
                <Route path='home' component={ Home }>
                    <IndexRoute component={ Page } />
                    <Route path='page(/:itemIndex)' component={ Page } />
                </Route>
                <Route path='add-new-item' component={ AddNewItem } />
            </Router>
        )
    }
});

HOME 只是一个包含导航栏的包装器,可以根据活动索引呈现子项

添加新项目 是一个组件,它将转到/页面/ [新创建的项目的索引]

页

const Page = React.createClass({
    getInitialState() {
        return {
            data: undefined,
            scrollTo: parseInt(this.props.params.goalIndex) || undefined
        };
    },

    componentWillMount() {
        // this gets data and …

我有一个包含一系列项目的列表，但我无法让它将另一个项目滚动到视图中。诸如此类的解决方案不太有效，因为我必须上下滚动（基本上，如果列表太大，则每隔一段时间滚动它以显示所有项目）。

我制作了一个codepen来说明react-scroll-to-component的问题，但我对任何库/本机解决方案持开放态度。基本功能只是scrollToComponent(ref, <options>).

据我所知，错误是它尝试在主体上滚动，而不是在实际的容器上滚动。如果删除 div 的高度/溢出属性，它将起作用。

不起作用：

<div
    style={{
    height: `200px`,
    overflow: "hidden"
    }}
>
    {this.state.items.map(item => (
    <Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
    ))}
</div>

作品：

<div>
    {this.state.items.map(item => (
    <Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
    ))}
</div>

适合不想去 codepen 的人的完整代码：

class Item extends React.Component {
  render() {
    return <div style={{ padding: `12px` }}>Item {this.props.item}</div>;
  }
}

class List extends React.Component {
  state = {
    items: [
      1,
      2, …