Supongo que tiene algún tipo de componente List y algún tipo de componente Item . La forma en que lo hice en un proyecto fue dejar que el elemento supiera si estaba activo o no; el elemento le pediría a la lista que se desplace a la vista si es necesario. Considere el siguiente pseudocódigo:

 class List extends React.Component { render() { return <div>{this.props.items.map(this.renderItem)}</div>; } renderItem(item) { return <Item key={item.id} item={item} active={item.id === this.props.activeId} scrollIntoView={this.scrollElementIntoViewIfNeeded} /> } scrollElementIntoViewIfNeeded(domNode) { var containerDomNode = React.findDOMNode(this); // Determine if `domNode` fully fits inside `containerDomNode`. // If not, set the container's scrollTop appropriately. } } class Item extends React.Component { render() { return <div>something...</div>; } componentDidMount() { this.ensureVisible(); } componentDidUpdate() { this.ensureVisible(); } ensureVisible() { if (this.props.active) { this.props.scrollIntoView(React.findDOMNode(this)); } } }

Una mejor solución es probablemente hacer que la lista sea responsable de desplazar el elemento a la vista (sin que el elemento sepa que está incluso en una lista). Para hacerlo, puede agregar un atributo de ref a un elemento determinado y encontrarlo con eso:

 class List extends React.Component { render() { return <div>{this.props.items.map(this.renderItem)}</div>; } renderItem(item) { var active = item.id === this.props.activeId; var props = { key: item.id, item: item, active: active }; if (active) { props.ref = "activeItem"; } return <Item {...props} /> } componentDidUpdate(prevProps) { // only scroll into view if the active item changed last render if (this.props.activeId !== prevProps.activeId) { this.ensureActiveItemVisible(); } } ensureActiveItemVisible() { var itemComponent = this.refs.activeItem; if (itemComponent) { var domNode = React.findDOMNode(itemComponent); this.scrollElementIntoViewIfNeeded(domNode); } } scrollElementIntoViewIfNeeded(domNode) { var containerDomNode = React.findDOMNode(this); // Determine if `domNode` fully fits inside `containerDomNode`. // If not, set the container's scrollTop appropriately. } }

Si no quiere hacer los cálculos para determinar si el elemento está visible dentro del nodo de la lista, puede usar el método DOM scrollIntoView() o el scrollIntoViewIfNeeded específico de Webkit, que tiene un polyfill disponible para que pueda usarlo en no -Navegadores Webkit.

Para React 16, la respuesta correcta es diferente de las respuestas anteriores:

 class Something extends Component { constructor(props) { super(props); this.boxRef = React.createRef(); } render() { return ( <div ref={this.boxRef} /> ); } }

Luego, para desplazarse, simplemente agregue (después del constructor):

 componentDidMount() { if (this.props.active) { // whatever your test might be this.boxRef.current.scrollIntoView(); } }

Nota: debe usar '.current' y puede enviar opciones para scrollIntoView:

 scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center', });

(Encontrado en http://www.albertgao.xyz/2018/06/07/scroll-a-not-in-view-component-into-the-view-using-react/ )

Al leer la especificación, fue un poco difícil descubrir el significado de bloque e inline, pero después de jugar con él, descubrí que para una lista de desplazamiento vertical, block: 'end' se aseguraba de que el elemento fuera visible sin desplazar artificialmente la parte superior. de mi contenido fuera de la ventana gráfica. Con 'centro', un elemento cerca de la parte inferior se deslizaba demasiado hacia arriba y aparecía un espacio vacío debajo. Pero mi contenedor es un padre flexible con justificar: 'estirar', por lo que puede afectar el comportamiento. No profundicé mucho más. Los elementos con desbordamiento oculto afectarán la forma en que actúa scrollIntoView, por lo que probablemente tendrá que experimentar por su cuenta.

Mi aplicación tiene un padre que debe estar a la vista y, si se selecciona un hijo, también se desplaza a la vista. Esto funcionó bien ya que el DidMount padre ocurre antes que el DidMount del hijo, por lo que se desplaza al padre, luego, cuando se procesa el hijo activo, se desplaza más para mostrarlo.

Otro ejemplo que usa la función en ref en lugar de cadena

 class List extends React.Component { constructor(props) { super(props); this.state = { items:[], index: 0 }; this._nodes = new Map(); this.handleAdd = this.handleAdd.bind(this); this.handleRemove = this.handleRemove.bind(this); } handleAdd() { let startNumber = 0; if (this.state.items.length) { startNumber = this.state.items[this.state.items.length - 1]; } let newItems = this.state.items.splice(0); for (let i = startNumber; i < startNumber + 100; i++) { newItems.push(i); } this.setState({ items: newItems }); } handleRemove() { this.setState({ items: this.state.items.slice(1) }); } handleShow(i) { this.setState({index: i}); const node = this._nodes.get(i); console.log(this._nodes); if (node) { ReactDOM.findDOMNode(node).scrollIntoView({block: 'end', behavior: 'smooth'}); } } render() { return( <div> <ul>{this.state.items.map((item, i) => (<Item key={i} ref={(element) => this._nodes.set(i, element)}>{item}</Item>))}</ul> <button onClick={this.handleShow.bind(this, 0)}>0</button> <button onClick={this.handleShow.bind(this, 50)}>50</button> <button onClick={this.handleShow.bind(this, 99)}>99</button> <button onClick={this.handleAdd}>Add</button> <button onClick={this.handleRemove}>Remove</button> {this.state.index} </div> ); } } class Item extends React.Component { render() { return (<li ref={ element => this.listItem = element }> {this.props.children} </li>); } }

Demostración: https://codepen.io/anon/pen/XpqJVe