Как я могу изменить класс этого элемента при прокрутке в React?

Когда вы подключаете прослушиватель событий, вы должны передать функцию в качестве параметра. Вы вызываете функцию напрямую, когда добавляете прослушиватель событий.

По сути, вам нужно изменить:

componentDidMount(){
    window.addEventListener('scroll', this.showText() )
}

к:

componentDidMount(){
    window.addEventListener('scroll', this.showText)
}

В вашем прослушивателе прокрутки вы должны проверить положение прокрутки window (это элемент, в котором вы выполняете прокрутку):

showText = () => {
    if (window.scrollY <= 100) {
        this.setState({
            showTexts: true
        });
    }    
}

Кроме того, вы подключаете прослушиватель событий в методе render. Метод render должен содержать только логику для рендеринга элементов.

Передать функцию как параметр, например

window.addEventListener('scroll', this.showText)

и удалить его из возврата.

Тогда вам просто нужно сделать только это в функции

if (window.scrollY<=100)
    this.setState({
        showTexts: true
    })

используйте свою позицию div здесь

Вам нужно использовать getBoundingCLientRect(), чтобы получить позицию прокрутки. window.addEventListener("scroll", this.showText); вам нужно передать this.showText вместо его вызова. имя класса имеет орфографическую ошибку.

showText = () => {
    const node = this.showTextRef;
    const {
        y = 0
    } = (node && node.getBoundingClientRect()) || {};

    this.setState({
        showTexts: y <= 100
    });
};

componentDidMount() {
    window.addEventListener("scroll", this.showText);
}

render() {
    const intro = document.querySelector(".intro");
    return (
       <div
          className = {this.state.showTexts ? "showText" : "hidden"}
          ref = {node => (this.showTextRef = node)}
       >
          <h1>You did it!</h1>
       </div>
   );
}

condesandbox рабочего примера: https://codesandbox.io/s/intelligent-shannon-1p6sp

Я собрал для вас рабочий образец, вот ссылка: https://codesandbox.io/embed/лето-лес-cksfh

В вашем коде есть несколько вещей, на которые следует обратить внимание:

componentDidMount(){
        window.addEventListener('scroll', this.showText() )
    }

Как уже упоминалось mgracia, использование this.showText() означает, что вы напрямую вызываете функцию. Правильный способ — просто использовать this.showText.

Идея функции showText заключается в том, чтобы узнать, как далеко пользователь прокрутил страницу от верхней позиции документа. Как это называлось с использованием:

const top = window.pageYOffset || document.documentElement.scrollTop;

теперь можно безопасно проверить вашу логику и установить состояние в соответствии с желаемым значением, здесь я выразил это так:

this.setState({
  showTexts: top <= 100
})

В вашем componentDidMount вы должны вызвать showText один раз, чтобы вызвать первую загрузку страницы, иначе при перезагрузке страницы функция не запустится.

Надеюсь, это поможет

Полный код:

class SlideIn extends Component {
  state = {
    showTexts: false,
  }

  showText = () => {
    // get how many px we've scrolled
    const top = window.pageYOffset || document.documentElement.scrollTop;
    this.setState({
      showTexts: top <= 100
    })
  }

  componentDidMount() {
    window.addEventListener('scroll', this.showText)
    this.showText();
  }

  render() {
    return (
      <div className = {`box ${this.state.showTexts ? 'visible' : 'hidden'}`}
        ref = {node => this.showTextRef = node}>
      
        <h1>You did it!</h1>
      </div>
    )
  }
}

.App {
  font-family: sans-serif;
  text-align: center;
  height: 2500px;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
}

.visible {
  display: block;
}

.hidden {
  display: none;
}