材料设计组件切换效果不起作用

Question

我正在尝试将材质组件 IconButton 与 React 一起使用。
材料设计：https://material-components.github.io/material-components-web-catalog/#/component/icon-button

它可以工作并显示元素并进行重复。但是切换不起作用。
这是我在 chrome 的 devtool 中的代码和元素树。
请教我解决方案。

import React, { useEffect } from 'react';
import { MDCIconButtonToggle } from '@material/icon-button';

const ButtonLike = () => {
  useEffect(() => {
    const iconToggle = new MDCIconButtonToggle(
      document.querySelector('.mdc-icon-button'),
    );
    iconToggle.on = true;
  });
  return (
    <button
      id="add-to-favorites"
      className="mdc-icon-button mdc-icon-button--on"
      aria-label="Add to favorites"
      aria-pressed="false"
    >
      <i className="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
      <i className="material-icons mdc-icon-button__icon">favorite_border</i>
    </button>
  );
};

export default ButtonLike;

元素树

<button id="add-to-favorites" class="mdc-icon-button mdc-icon-button--on" aria-label="Add to favorites" aria-pressed="false">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
    favorite
  </i>
  <i class="material-icons mdc-icon-button__icon">
    favorite_border
  </i>
</button>

Answer 1

您在useEffect() 中实例化iconToggle，但您忽略了useEffect() 接受第二个参数deps list 的事实。没有它，该逻辑会在每次重新渲染时重新运行，这意味着您的 iconToggle.on 每次都设置回 true，因此它保持在“开启”状态。

作为旁注，选择 HTML 元素的更 React-ish 方式是通过 useRef()，而不是 document.querySelector()，这可能会找到其他不需要的元素

import React, { useEffect, useRef } from 'react';
import { MDCIconButtonToggle } from '@material/icon-button';

const ButtonLike = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const iconToggle = new MDCIconButtonToggle(buttonRef.current);
    iconToggle.on = true;
  }, []);  // <-- You need to pass in an empty array
           //     to signal that you want this logic to run only once.

  return (
    <button
      ref={buttonRef}
      id="add-to-favorites"
      className="mdc-icon-button mdc-icon-button--on"
      aria-label="Add to favorites"
      aria-pressed="false"
    >
  );
}