javascript - 在 React 中恢复 UL LI 树

Question

我有JSON孩子。

const JSON_TREE = {
        name: "PARENT_3",
        id: "218",
        parent: {
            name: "PARENT_2",
            id: "217",
            parent: {
                name: "PARENT_1",
                id: "216"
            }
        }
    }
}

现在我可以从component

export default class Tree extends React.Component {
    render() {
        let data = this.props.data;
        return (
            <ul>
                {data.id}: {data.name}
                <li>
                    {data.parent !== undefined && <Tree data={data.parent}/>}
                </li>
            </ul>

        )
    }
}

并获得下一个渲染：

    218: PARENT_3
        217: PARENT_2
            216: PARENT_1

但我希望渲染：

   216: PARENT_1
       217: PARENT_2
           218: PARENT_3

我想我可以JSON在渲染之前重新排序对象，但这似乎不是一个好主意。我怎么能做到这一点？

标签： javascriptreactjs

Answer 1

对于这样的任务，为了更好的性能，我会使用样式。Flex boxflex-direction: column-reverse; 但是如果你想反转对象.reverse();