反应嵌套反应元件

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对修改后的params组件进行处理。

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