Question

我是React的新手，尝试使用https://getuikit.com/docs/card uikit卡作为组件时遇到此错误。

删除该属性会完全破坏卡的结构。

import React from 'react';
import faker from 'faker';
import "./css/Cards.css";

const Cards = (props) => {
    return (

        <div className="uk-card uk-card-default uk-width-1-2@m">
            <div className="uk-card-header">
                <div className="uk-grid-small uk-flex-middle" uk-grid>
                    <div className="uk-width-auto">
                        <img className="uk-border-circle" width="40" height="40" src={faker.image.animals} />>
                    </div>
                    <div className="uk-width-expand">
                        <h3 className="uk-card-title uk-margin-remove-bottom">Title</h3>
                        <p className="uk-text-meta uk-margin-remove-top"></p>
                    </div>
                </div>
            </div>
            <div className="uk-card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div className="uk-card-footer">
                <a href="#" className="uk-button uk-button-text">Read more</a>
            </div>
        </div>
    )
}




export default Cards;

谢谢！

Answer 1

根据https://getuikit.com/docs/javascript#component-usage上的文档，在与React一起使用时，必须在属性前面加上data-。

所以，而不是：

<div className="uk-grid-small uk-flex-middle" uk-grid>

尝试：

<div className="uk-grid-small uk-flex-middle" data-uk-grid>

警告：收到非布尔型属性uk-grid的true。

1 个答案: