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

【问题标题】：Trigger a CSS animation in one component from a distant component in React从 React 中的远程组件触发一个组件中的 CSS 动画
【发布时间】：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 开销......

标签： css reactjs animation

【解决方案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>
        );
    }
}

【讨论】：