Using Callback Refs：

Question

我想滚动到列表的最后一项，如果没有新组件，实现这一点没问题。

这是工作代码 https://codesandbox.io/s/zn12r4p9ym

 data=list(map(int,input().split()))
 print(min(data))

但是如果我的列表在新文件中怎么办？像export default class App extends React.Component { componentDidMount() { this.lastNode && this.lastNode.scrollIntoView(false); } render() { return ( <div className="App"> <div style={{ height: "70px", overflow: "auto" }}> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p ref={el => (this.lastNode = el)}>6</p> </div> </div> ); } }一样，如何获得<List />的引用？

Answer 1

您基本上是在尝试将子组件List的DOM Refs公开给其父组件App。如果您使用的是 React 16.3或更高版本，则官方文档建议在这种情况下使用ref forwarding。

引用转发是一项可选功能，它使某些组件可以他们收到的ref，并将其进一步传递（换句话说，“转发” 它）给孩子。

这是使用Ref转发解决此问题的演示。

const List = React.forwardRef((props, ref) => {
  return (
    <React.Fragment>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p ref={ref}>6</p>
    </React.Fragment>
  )
});


class App extends React.Component {
  constructor(props) {
    super(props);
    this.lastListNoderef = React.createRef();
  }

  componentDidMount() {
    this.lastListNoderef && this.lastListNoderef.current.scrollIntoView(false);
  }

  render() {
    return (
      <div className="App">
        <div style={{ height: "70px", overflow: "auto" }}>
          <List ref={this.lastListNoderef}/>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Using Callback Refs：

如果您使用React 16.2或更低版本，或者您需要的灵活性比由参考转发提供，您可以使用这种替代方法显式地将ref作为不同名称的prop传递。

示例：

const List = (props) => {
  return (
    <React.Fragment>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p ref={props.inputRef}>6</p>
    </React.Fragment>
  )
};

class App extends React.Component {
  componentDidMount() {
    this.lastListNoderef && this.lastListNoderef.scrollIntoView(false);
  }

  render() {
    return (
      <div className="App">
        <div style={{ height: "70px", overflow: "auto" }}>
          <List inputRef={el => this.lastListNoderef = el} />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

获取无状态组件中的引用

1 个答案:

Using Callback Refs：