我想使用香草字幕为ReactJS图像添加一个字幕

Question

我为React香草品牌找到了这个包

我没有找到很多指示。我接受了我所知道的，并试图让它发挥作用。

这是我的代码：

import marquee from 'vanilla-marquee'
const element = 'text for the marquee. I want to know if it works.'

const SomeName = () => {
new marquee(element, {
delayBeforeStart: 500,
direction: 'left',
duplicated: true,
gap: 20,
pauseOnHover: false,
startVisible: false,
recalcResize: false,
}); 
};

export default SomeName

错误状态：

Uncaught Error: el cannot be just a selector
at new marquee (vanilla-marquee.js:193:1)
at SomeName (ticker.component.jsx:5:1)
at renderWithHooks (react-dom.development.js:16300:1)
at mountIndeterminateComponent (react-dom.development.js:20069:1)
at beginWork (react-dom.development.js:21582:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4159:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4209:1)
at invokeGuardedCallback (react-dom.development.js:4272:1)
at beginWork$1 (react-dom.development.js:27446:1)
at performUnitOfWork (react-dom.development.js:26552:1)
VM495 react_devtools_backend.js:4012 The above error occurred in the <SomeName> 
component:

我感谢你的帮助。

Answer 1

如果您查看示例页面源代码，您将看到：

<h3 class="marquee marquee-1">Vanilla marquee is awesome!</h3>
...
<script type="module" defer>
import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee@1.1.2/dist/vanilla-marquee.js';
new marquee( document.querySelector( '.marquee-1' ) );
...

此外，在源代码中：

if ( typeof el === 'string' )
throw new Error( 'el cannot be just a selector' );

因此，您需要一个像这样或类似的HTML元素，而不是一个文本字符串：

<p id='foobar'>text for the marquee. I want to know if it works.</p>
...
new marquee( document.getElementById('foobar'), <parameters>);

更新：如果你想以编程方式完成这一切，我认为这应该足够了：-根据这个答案改编，并得到这个元问题的支持：

<script type="module">
import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee@1.1.2/dist/vanilla-marquee.js';
const element = 'text for the marquee. I want to know if it works.';
var htmlElement = document.createElement('h3');
htmlElement.innerHTML = element;
document.body.appendChild(htmlElement);
new marquee(htmlElement,
{
delayBeforeStart: 0,
direction:        'left',
speed:            200,
});
</script>

然而，我不确定将其纳入React的最佳方式。。。也许仅仅更改为import marquee from 'vanilla-marquee'就足够了？

Answer 2

如果有人需要，下面的代码将为您提供一个字幕。它也会占用你导入它的整个页面。我确信有一种方法可以驯服它，我正在寻找它。用div包裹它是行不通的。

import React from 'react';
import Marquee from 'vanilla-marquee'

Const element = 'Our World is changing. .... So is Therapy';
var htmlElement = document.createElement('h3');
htmlElement.innerHTML = element;
document.body.appendChild(htmlElement);
new Marquee(htmlElement,
{
delayBeforeStart: 0,
direction:        'left',
speed:            200,
duplicated: true,
gap: 20,
height: 20,

});

export default Marquee