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

Question

我有一个简单的 React 组件，它从我的道具中的一个数组中呈现多个按钮。我在 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 方法是编写注入必要逻辑的组件。

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

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

然后渲染该组件而不是原来的 StyledButton 组件，它将调用 MDCRipple.attachTo() 本身及其 ref.

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

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

How to use MDCRipple.attachTo on multiple buttons in React Component

javascript

reactjs

material-components-web