Question

是否可能（以及如何:-)）嵌套基于组件的反应并修改嵌套元素参数？

<ul data-component="nested-sortable" data-item={}>
    <li data-component="nested-item">item 1</li>
    <li data-component="nested-item">item 2</li>
    <li data-component="nested-item">item 3</li>
    <li data-component="nested-item">item 4</li>
    <li data-component="nested-item">item 5</li>
    <li data-component="nested-item">item 6</li>
</ul>

所有组件都是基于上面的html结构生成的。

对元素进行排序：

   const nodes = document.querySelectorAll('[data-component="nested-sortable"]');

    for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];

        let props = {};

        render(
            <NestedSortable {...props}>
                <span dangerouslySetInnerHTML={{__html: node.innerHTML}}/>
            </NestedSortable>,
            node
        );
    }

可排序元素：

const nodes = document.querySelectorAll('[data-component="nested-item"]');

for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    let props = {};

    render(
        <NestedItem {...props}>
            <span dangerouslySetInnerHTML={{__html: node.innerHTML}}/>
        </NestedItem>,
        node
    );
}

Answer 1

您的问题不明确，您可以将React.cloneElement用于已修改参数的组件。

https://reactjs.org/docs/react-api.html#cloneelement

反应嵌套反应基于组件

1 个答案: