时间戳

首页 > 解决方案 > 从 React 中的一个远程组件触发一个组件中的 CSS 动画

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

问题描述

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

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

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

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

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

标签： cssreactjsanimation

解决方案

因此，您最好的选择可能是使用 Redux 或类似的状态管理系统。也就是说，您可以通过使用包装组件的本地状态来做到这一点，如本问题所示。从长远来看，我认为这不会比使用 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>
        );
    }
}

推荐阅读