javascript - 第三方 slider 添加具有 'class' 等属性的动态元素。我正在使用 react

Question

我正在开发一个 React 应用程序(将静态 HTML 网站转换为 React 应用程序)。 它有一个添加动态元素的 slider (我猜是革命 slider )。喜欢等

现在 React 不会提示编译时间了。但是在页面呈现上，由于显而易见的原因，它失败了。它应该附加“className”，但我不能为此修改该库或任何第三方库的源。

处理此用例的最佳方法是什么？

PS:提前致歉。我对 React 很天真!

Answer 1

免责声明

如果您不是在谈论 Revolution Slider，我认为您是，请告诉我，我会删除此答案。似乎有一个第 3 方库是为了暴露您在使用 Revolution Slider 时遇到的问题。在 React.js .

它的文档似乎很少，但让我们看看我们是否可以通过检查 repo 的源代码来理解它。

问题

如何将样式传递给第 3 方流行库 Revolution Slider .

解释

如果你说的是 Revolution Slider看起来 NPM 有这个 slider 的包 here .

如果我没看错的话，它似乎还有一个在源代码中记录不完整的 Prop 。 On this page you can see the code .

解决方案

在该文件中这个 function在页面底部出现检查 prop 的名称过去了。

function fetchAttributes(payload, sk = [], ex = []) {
    const attr = {};
    const skip = ['children'].concat(sk)
    const exceptions = ['class', 'src', 'alt', 'style', 'id'].concat(...ex);
    for (let key in payload) {
        if (skip.includes(key)) {
            continue;
        } else if (key === 'class') {
            attr[key + 'Name'] = payload[key];
        } else if (exceptions.includes(key)) {
            attr[key] = payload[key];
        } else {
            if (key.startsWith('data-')) {
                attr[key] = payload[key];
            } else {
                attr['data-' + key] = payload[key];
            }
        }

    }
    return attr;
} 

这很重要，因为我们可以看到哪个 prop它正在检查。在这种情况下，它似乎在寻找，

['class', 'src', 'alt', 'style', 'id']

我们还可以看到 example of that here .

示例代码

import RevSlider, { Slide, Caption } from 'react-rev-slider';

const config = {
    delay:9000,
    startwidth:1170,
    startheight:500,
    hideThumbs:10,
    fullWidth:"on",
    forceFullWidth:"on"
};

<RevSlider config={config}>
    <Slide
        src="https://i.ytimg.com/vi/dFnvYtPePRA/maxresdefault.jpg"
        alt="slidebg1"
        data-bgfit="cover"
        data-bgposition="left top"
        data-bgrepeat="no-repeat"
        slideProperties={{
            'data-transition': "fade",
            'data-slotamount': "7",
            'data-masterspeed': "1500"
        }}
    >   
        <Caption
            class="tp-caption skewfromrightshort fadeout"
            data-x="85"
            data-y="224"
            data-speed="500"
            data-start="1200"
            data-easing="Power4.easeOut"
        >
            This is a caption
        </Caption>
    </Slide>
    <Slide
        src="https://i.ytimg.com/vi/0xe4H666drk/maxresdefault.jpg"
        alt="slidebg1"
        data-bgfit="cover"
        data-bgposition="left top"
        data-bgrepeat="no-repeat"
        slideProperties={{
            'data-transition': "fade",
            'data-slotamount': "7",
            'data-masterspeed': "1500"
        }}
    >   
        <Caption
            class="tp-caption skewfromrightshort fadeout"
            data-x="85"
            data-y="224"
            data-speed="500"
            data-start="1200"
            data-easing="Power4.easeOut"
        >
            This is a caption
        </Caption>
    </Slide>
</RevSlider>

但更具体地看一下传入的 Prop 。看起来你可以传递 prop在电话中，slideProperties然后传递给函数调用并检查其中的任何一个，

['class', 'src', 'alt', 'style', 'id']

所以给<Slide />添加样式或 <Caption />看来你可以这样做，

<Slide class={style.myClass}/>或 <Caption id={style.myId} />

虽然我看起来有点困惑。在示例代码中显示 slideProperties和 src被用作 2 个独立的 props .但是当我阅读源代码时，它看起来好像 prop slideProperties是一个接受键的对象，['class', 'src', 'alt', 'style', 'id'] .

无论哪种方式，我都认为我们可以通过一种或另一种方式传递这些信息，这可以毫不费力地实现。

我认为可以安全地假设这会起作用，因为我在上面添加的示例代码是从 README.md 中找到的文件 their github page .它显示他们使用 src="string"以同样的方式。

我们可以看到src在 function fetchAttributes() 处理这似乎通过了 props到 Components .带一点css您可以编写一些样式以将其传递到 2 Components .然后轻松定位 li标记和 img用你的 css 标记.

希望对您有所帮助。