получить ссылку в компоненте без сохранения состояния

Question

Я хочу перейти к последнему элементу списка, у меня нет проблем с реализацией, если нет нового компонента.

Вот рабочий код https://codesandbox.io/s/zn12r4p9ym

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 />, как я могу получить ref <List />?

Answer 1

В основном вы пытаетесь представить ссылки DOM дочернего компонента List на его родительский компонент App.Если вы используете React 16.3 или выше , официальный документ рекомендует использовать ref forwarding для этих случаев.

Ref forwarding является опциональной функцией, которая позволяетнекоторые компоненты берут реф, который они получают, и передают его дальше (другими словами, «пересылают» его) ребенку.

Вот демонстрация использования переадресации Реф для решения этой проблемы.

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>

Использование обратных ссылок :

Если вы используете React 16.2 или ниже, или если вам нужно большегибкость, которую обеспечивает пересылка ссылок, вы можете использовать этот альтернативный подход и явно передать ссылку как опору с другим именем.

Пример:

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>