从 React 中的远程组件触发一个组件中的 CSS 动画

Posted 2023-02-22

【中文标题】从 React 中的远程组件触发一个组件中的 CSS 动画

【英文标题】：Trigger a CSS animation in one component from a distant component in React

【发布时间】：2020-01-09 08:31:34

【问题描述】：

我有一个相当复杂的 React16/Redux 单页应用程序。

我试图找到一种方法来触发组件或 DOM 元素（我们称之为 Foo 组件）上的 CSS 动画，当用户按下一个按钮（我们称之为 Bar 组件）时，它代表“远”远离这个component/DOM element。

我想避免通过回调列表或通过 Redux，使用一种 observer pattern，以便我可以执行以下操作：

class Bar extends React.Component 
    ...
    onButtonClick() 
        allFooComponentsOnThePageShouldBlinkFor1Second();
    

有简单的方法吗？

【问题讨论】：

这听起来确实像是 Redux 的工作。你为什么不想那样处理呢？

我想避免编写 action/reducers 等的所有 redux 开销......

【参考方案1】：

因此，您最好的选择可能是使用 Redux 或类似的状态管理系统。也就是说，您可以通过使用包装器组件的本地状态来执行此操作，如 this question 中所示。从长远来看，我认为这不会比使用 Redux 更快或更容易，但我们开始吧：

您的组件Wrapper 将具有一些本地状态，用于跟踪Bar 是否应该闪烁，并具有更改传递给Foo 的状态的功能。您需要小心确保单击处理程序中的this 始终指向Wrapper。我在这里用箭头函数完成了它。如果您更愿意使用.bind，那么您可以在您的实现中进行更改。

class Wrapper extends React.Component 
    // accessible through `this.state`
    state =  fooShouldBlink: false ;

    handleClick = () => 
        // arrow function preserves `this` as `Wrapper`
        this.setState( fooShouldBlink: true , () => 
            // Resets state after 1 second so that this can be done more than once. 
            // If that's not needed, you can take this out
            setTimeout(() => this.setState( fooShouldBlink: false ), 1000);
        );
    

    render () 
        return (
            <div>
                <Bar clickHandler=this.handleClick/>
                <Foo blinkState=this.state.fooShouldBlink />
                <Foo blinkState=this.state.fooShouldBlink />
                <Foo blinkState=this.state.fooShouldBlink />
            </div>
        );