React中使用vanilla-marquee实现跑马灯报错求助：el cannot be just a selector

错误原因 #

你直接把文本字符串传给了marquee构造函数，但这个库要求第一个参数必须是DOM元素或有效的CSS选择器，不能是纯文本内容，这就是报错el cannot be just a selector的原因。

修复代码 #

import { useEffect, useRef } from 'react';
import marquee from 'vanilla-marquee';

const SomeName = () => {
  // 创建ref引用DOM容器
  const marqueeRef = useRef(null);

  useEffect(() => {
    // 确保DOM元素存在后初始化marquee
    if (marqueeRef.current) {
      new marquee(marqueeRef.current, {
        delayBeforeStart: 500,
        direction: 'left',
        duplicated: true,
        gap: 20,
        pauseOnHover: false,
        startVisible: false,
        recalcResize: false,
      });
    }
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    // 用ref绑定的容器包裹跑马灯文本
    <div ref={marqueeRef}>
      text for the marquee. I want to know if it works.
    </div>
  );
};

export default SomeName;

关键说明 #

• 用useRef获取DOM元素的引用，这是React中操作DOM的标准方式
• 用useEffect在组件挂载完成后初始化marquee，避免DOM未渲染就执行操作
• 把跑马灯文本放到ref绑定的容器内，再将容器DOM传给marquee构造函数

内容的提问来源于stack exchange，提问作者terere