javascript - 如何在 React 组件中的多个按钮上使用 MDCRipple.attachTo

Question

我有一个简单的 React 组件，它从我的 props 中的数组中渲染多个按钮。我正在 DidMount 上应用波纹，但是，它仅附加在第一个按钮上，其余的都被忽略。看起来 AttachTo 仅采用第一个元素。还有另一种方法可以连接到 didmount 上的所有按钮吗？

class NavBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            links
        };
    }
    componentDidMount() {
        MDCRipple.attachTo(document.querySelector('.mdc-button'));
    }
    render() {
        return (
            <section>
                {this.state.links.map((link, i) => {
                    return (
                        <StyledLink key={i} to={link.url}>
                            <StyledButton className="mdc-button">
                                <StyledIcon className="material-icons">{link.icon}</StyledIcon>
                                <StyledTypography className="mdc-typography--caption">
                                    {link.title}
                                </StyledTypography>
                            </StyledButton>
                        </StyledLink>
                    );
                })}
            </section>
        );
    }
}

最终标记

<a class="sc-iwsKbI bhaIR">
	<button class="mdc-button sc-dnqmqq ksXmjj mdc-ripple-upgraded" style="--mdc-ripple-fg-size:57.599999999999994px; --mdc-ripple-fg-scale:2.1766951530355496; --mdc-ripple-fg-translate-start:-7.799999999999997px, 19.200000000000003px; --mdc-ripple-fg-translate-end:3.200000000000003px, 19.200000000000003px;">
		...content
	</button>
</a>
<a class="sc-iwsKbI bhaIR">
	<button class="mdc-button sc-dnqmqq ksXmjj">
		...content
	</button>
</a>

已更新我能够找到一种方法来使用每个按钮的attachTo，但似乎仍然有更好的方法。我通过 componentDidMount() 更改为:

componentDidMount() {
    this.state.links.forEach((link) => {
        MDCRipple.attachTo(document.getElementById(`button-navbar-${link.id}`));
    });

}

然后将我的渲染更改为

<StyledButton id={`button-navbar-${link.id}`} className="mdc-button">

有没有一种方法可以做到这一点而不必遍历数组？

Answer 1

执行此操作的 react 方法是编写注入(inject)必要逻辑的组件。

class RippleButton extends Component {
    const handleRef = elem => MDCRipple.attachTo(elem);

    render() {
        return (
            <StyledButton {...this.props} ref={this.handleRef} />
        );
    }
}

然后渲染该组件而不是原始 StyledButton 组件，它将使用其引用调用 MDCRipple.attachTo() 本身。

根据 StyledButton 的实现方式，您可能需要使用另一个 prop 来获取底层 DOM 元素的引用。您没有提供足够的代码来准确了解这一点。