0

我有一个简单的 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">

有没有办法做到这一点而不必遍历数组？

4

1 回答 1

2

做到这一点的反应方式是编写注入必要逻辑的组件。

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

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

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

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

于 2018-05-11T17:16:30.803 回答