Question

我对ReactJS很新，并且在按下按钮时尝试更新我的一个类。该程序是一个健身应用程序，它根据目录向用户显示数据。例如：男性 - 1 - video.mp4 /男性 - 2 - video.mp4

目前，如果用户在视频1上并且想要移动到视频2，则他们将按下一个按钮。此按钮需要更新类以显示正确的视频和文本。我尝试过使用javascript：

document.getElementById("pageTitle").innerHTML = pageTitle;
document.getElementById("tipTitle").innerHTML = tipTitle;
document.getElementById("tipInfo").innerHTML = tipInfo;

从每个目录中的文本文件以及视频中提取正确的信息。当他们按下一个/上一个时，目录号码会更新：

我想要做的是有效地重新渲染类，再次调用componentDidMount函数并将类的状态更改为新信息，因为当按下按钮时目录位置的全局变量已更新。

在reactJS中是否有一个方法，如果没有，我怎样才能在更改某些变量（例如目录位置）时重新调用componentDidMount函数？我查了 setState ，但我并不是100％确定它是我正在寻找的东西。我知道这个问题可能看起来有点模糊，所以请随时询问您是否需要更多信息。

Answer 1

您应该创建一个具有保存当前视频播放状态的组件，并在用户单击“下一步”按钮时更新此状态。您正在手动更新DOM，这违背了使用React的目的。

class MyVideoPlayer extends React.Component{
    component(props) {
        super(props);
        this.state = ({currentVideo: "male-1-video.mp4"});
    }

    changeVideo = () => {
        this.setState({currentVideo: next_video_here})
    }

    render() {
        return (
            ... your video player here ...
            <button onClick={this.changeVideo}>NEXT</button>
        )
    }
}

做这样的事情。

Answer 2

我认为@Franz Palngipang很清楚如何使用ReactJS实现此页面。我会尝试清理一些你听起来很混乱的事情。 componentDidMount仅在第一次在该组件上调用render后调用。渲染完成后立即发生这种情况。 componentDidUpdate可能是您正在寻找的;这也是在渲染后调用，但这在每次渲染后都会发生。每当你在代码中调用setState时，它也会调用render（因此也调用componentDidUpdate）。所以想象一下如果你无条件地在componentDidUpdate中调用setState会发生什么（你会得到一个无限循环）。在render方法中，您可以使用if语句或其他条件（可能基于this.state或this.props）来返回/生成不同的HTML。

ReactJS更新类

2 个答案: