reactjs - 警告 : Received `true` for a non-boolean attribute `uk-grid`

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>