Question

说我有这个List无状态组件：

const List: React.StatelessComponent<ListProps> = props => {
    const listClasses =
        'atom-list uk-list ' +
        props.className +
        (props.striped ? ' uk-list-striped' : '')
    return (
        <ul className={listClasses}>
            {props.items.map((item, index) => {
                const itemClasses = [item.classes, props.childClasses]
                    .filter(prop => prop)
                    .join(' ')
                return (
                    <li key={index} className={itemClasses}>
                        {item.content}
                    </li>
                )
            })}
        </ul>
    )
}

我在另一个无状态组件List中使用SortableList组件：

const SortableList: React.StatelessComponent<SortableListProps> = props => {
    const classes = 'molecule-sortableList ' + props.className
    const items = props.items.map((item, index) => {
        return { content: <div><div className="uk-sortable-handle" />{item.content}</div> }
    })
    return <List className={classes} items={items} data-uk-sortable="handle: .uk-sortable-handle" />
}

Because I'm using UIKit to make the list sortable，当我在List中使用时，我需要将数据属性应用于SortableList元素，并在结果ul中输出该数据属性。

将数据属性直接应用于ul作品中的List（该属性在生成的HTML中输出），但这并不理想，因为它需要{{1}我知道与它如何被使用无关的东西。

我真的想直接将数据属性应用于List的用法，并在结果List中输出该输出。不幸的是，在ul中执行此类操作似乎无效：

SortableList

为什么这不起作用，我需要做什么才能将数据属性传递到return <List className={classes} items={items} data-uk-sortable="handle: .uk-sortable-handle" />并将其输出到生成的List？

Answer 1

您可以使用类似以下方法执行此操作：

const List: React.StatelessComponent<ListProps> = (props) => {
    return (
        <div {...props}>List</div>
    );
};

示例过于简化，您不应直接销毁props，因为它们包含一些您不希望作为属性呈现的额外属性。相反，您可以复制以＆＃34;数据开始的所有props属性 - ＆＃34;进入单独的对象并反而破坏它。

将数据属性通过无状态组件传递到其HTML输出

1 个答案: