Question

你好，我是新来的反应者，对更改类和动画onClick有疑问。

我只尝试使用我在className中添加或删除的css类上下移动。

app.js我的状态为

updown: ["containerMG"],

这是我在app.js中渲染组件的方式

  render() {

    return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      <ContainerMG
        selectedFilm={this.state.selectedFilm}
        klasa={this.state.updown}
        zatvori={this.closePreview}/>
      </div>
    );
  }

我的组件看起来像这样

const ContainerMG = (props) => {
  return (
      <div className={props.klasa.join(' ')}>
      <img onClick={props.zatvori} src="xxx" alt="close" className="close-popup" />
        <p>{props.selectedFilm.naslovFilma}</p>
      </div>
  )
}

这就是div向上移动的方式

  injectFilm = (filmIndex) => {
    this.state.updown.push("position-top");
    const selectedFilm = this.state.filmovi.find((film, index) => index === filmIndex)
    this.setState((prevState) => ({
       selectedFilm
    }))
  }

这就是我试图将其向下移动的方式

  closePreview = () => {
    this.state.updown.splice(1);
  }

我非常确定我不应该直接更改状态，并且当我更改状态以删除“ position-top”类时，dom不会重新加载。

感谢您事先提供的所有帮助，如果我没有显示您需要的内容，请务必写信。

Answer 1

是的，永远不要那样直接更改状态，而应使用setState()方法。进行this.state.updown.push("position-top");会使它变异。假设您要删除数组中的最后任何内容，可以执行以下操作：

const {updown} = this.state;
updown.pop();
this.setState({updown: updown});

这将导致重新渲染。将状态视为不变。

拼接状态后ReactJS不更新dom类

1 个答案: