Question

当用户关闭另一个组件时，我们正在尝试滚动到特定组件。

我们的示例与下面的示例非常类似，取自https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

function CustomComponents(props) {
  const items = [1,2,3,4].map((x, i) => return (
    <div ref={props.inputRef} key={i}>
     x + hello
    </div>
  )

  return (
    <div>
      { items }
    </div>
  );
}

function Parent(props) {
  return (
    <div>
      <CustomComponents inputRef={props.inputRef} />
    </div>
  );
}


class Grandparent extends React.Component {
  render() {
    return (
      <Parent
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

我们正在提供一大堆卡片，希望能够通过拨打this.refs[elem].scrollIntoView()

滚动到特定卡片

但我们的问题是调用this.refs会在所有级别返回一个空对象，因此我们无法附加到特定元素，然后在用户返回查看此组件时触发它。

想要一些人如何解决这个问题。

Answer 1

你想在哪里打电话this.refs[elem].scrollIntoView()？您应该使用ref或componentDidMount内的componentDidUpdate，而不是render方法。

Answer 2

我通过在祖父母组件中提供下面写的if语句来解决我的具体问题。

{{1}}

scrollIntoView使用React引用

2 个答案: