第三方滑块添加具有“类”等属性的动态元素。我正在使用反应

Question

我正在开发一个反应应用程序（将静态HTML网站转换为反应应用程序）。它有一个滑块（我猜的是旋转滑块），它增加了动态元素。喜欢等

现在反应不会抱怨编译时间。但是在页面呈现方面，由于显而易见的原因，它失败了。它应该附加'className'，但我无法修改该库或任何第三方库的来源。

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

PS：提前道歉。我对React很天真！

Answer 1

放弃

如果你不是在谈论革命滑块，我的印象就是你，请告诉我，我会删除这个答案。看来有一个第三方库是为了揭露你在Revolution Slider中使用React.js时遇到的问题。

它看起来确实记录不好，但让我们看看我们是否可以通过检查repo的源代码来理解它。

问题

如何将风格传递给第三方流行图书馆Revolution Slider。

说明

如果你说的是Revolution Slider，看来NPM有一个这个滑块here的包。

如果我正确地看待它，它似乎在源代码中有一个很难记录的道具。 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的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标签。

我希望这有帮助。