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

Question

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

我正在尝试找到一种方法，当用户按下按钮(我们称之为 Bar 组件)，它离这个 组件/DOM 元素“很远”。

我想避免使用一种观察者模式来传递回调列表或通过 Redux，这样我就可以做类似的事情:

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

有没有简单的方法可以做到这一点？

Answer 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>
        );
    }
}