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

执行此操作的反应方式是编写注入必要逻辑的组件。

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

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

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

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

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

1 个答案: