Question

我有一个包含一系列项目的列表，但是我无法将其滚动到视图中。 this之类的解决方案不太有效，因为我必须上下滚动（基本上，如果列表太大，请间隔滚动以显示所有项目）。

我做了一个codepen，它说明了react-scroll-to-component的问题，但是我可以使用任何库/本机解决方案。基本功能仅为scrollToComponent(ref, <options>)。

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

不起作用：

<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,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
      13,
      14,
      15,
      16,
      17,
      18,
      19,
      20
    ]
  };

  componendDidMount() {
    this.state.items.forEach(item => (this[`ref_${item}`] = React.createRef()));
  }

  onClick = () => {
    scrollToComponent(this.ref_20);
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <h1>My List</h1>
        <button onClick={this.onClick}>Clickidy</button>
        {/*Replace with <div> to see it work*/}
        <div
          style={{
            height: `200px`,
            overflow: "hidden",
            backgroundColor: "red"
          }}
        >
          {this.state.items.map(item => (
            <Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
          ))}
        </div>
      </div>
    );
  }
}

Answer 1

将第55行从overflow: hidden更改为overflow: scroll。

Answer 2

我将为您提供一个简单的解决方法，但这就是它的工作方式。您需要将包含所有元素的div的溢出设置为scroll。这是因为，如果将其设置为隐藏，则所有不适合该div的元素都会被隐藏。我提供的解决方案甚至不需要使用react-scroll-to-component或任何软件包。

import React from "react";
import { render } from "react-dom";

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

class List extends React.Component {
  state = {
    items: [
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
      13,
      14,
      15,
      16,
      17,
      18,
      19,
      20
    ]
  };

  componendDidMount() {
    this.state.items.forEach(item => (this[`ref_${item}`] = React.createRef()));
  }

  onClick = () => {
    /** You can avoid using getElementById if you can get the div rendered by Item component using refs.
     * You can look at refs forwarding and other technics to see how you can solve this */
    const divToScrollTo = document.getElementById(`${this.ref_20.props.item}`);
    if (divToScrollTo) {
      divToScrollTo.scrollIntoView();
    }
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <h1>My List</h1>
        <button onClick={this.onClick}>Clickidy</button>
        <div
          style={{
            height: `200px`,
            overflow: "scroll",
            backgroundColor: "red"
          }}
        >
          {this.state.items.map(item => (
            <Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
          ))}
        </div>
      </div>
    );
  }
}

或者您可以单击下面的链接以获取电笔解决方案 https://codesandbox.io/s/2vo0j2w660

我没有做代码中要求的更多优化，因为我时间不好，但希望对您有所帮助

如果您使用引用转发（如此处的代码笔所示）https://codesandbox.io/s/yjj66xl2v1，则更加容易，但是您必须在构造函数方法中创建refs。

反应滚动组件以查看内部溢出隐藏元素

2 个答案: