javascript - 在 ReactJS/Javascript 中使用多级数字的树图

Question

我有这个包含问题和多级编号的列表。

question = [{'id':1, 'que': 'what', 'No':'1'}, {'id':2, 'que': 'why', 'No':'2'}, {'id':3, 'que': 'who', 'No':'1.1'}, {'id':4, 'que': 'when', 'No':'1.2'}, {'id':5, 'que': 'how', 'No':'2.1'}, {'id':6, 'que': 'where', 'No':'2.2'}, {'id':7, 'que': 'what is', 'No':'1.1.1'}, {'id':8, 'que': 'what are', 'No':'1.1.2'}, {'id':9, 'que': 'when is', 'No':'2.2.1'}, {'id':10, 'que': 'who are', 'No':'2.2.2'}]

我想根据上面列表中的多级编号制作一个树形图，如下所示。

            '1'                        '2'
     '1.1'        '1.2'        '2.1'          '2.2'
'1.1.1' '1.1.2'                         '2.2.1'  '2.2.2'

这是我目前所拥有的。

<ul> 
    <li><a href="#"><p class="text">{}</p><p class="text">List dashboards we develop that rely on BMC</p></a>
                <ul>
                {question.map(item => {
                    if (item.No[1] != "." && item.No[3] != ".") {
                    return (
                        <li key={item.id}>
                        <a href="#">{item.No} - {item.que}</a>
                        </li>
                    )}
                    else if(item.No[1] == ".") {
                        return (
                            <li key={item.id}>
                            <a href="#">{item.No} - {item.Detail}</a>
                            </li>
                        )
                    }
                })}</ul></li>
</ul>

目前，我有一个问题，使像“1.1”这样的项目低于“1”，并且只能使所有项目的级别相同。如何根据“。”的数量制作树图的级别 在项目中？

我在此链接中使用的 CSS 代码。

标签： javascriptreactjs