Question

我目前正在使用React创建一个递归树，并且已经击中另一个路障。我试图基本上从我的JSON结构中传递路径。因此，对于每个孩子，我想传递一个类似于此的对象道具......

1级儿童（点击水果）

{value：“Fruit”}

2级儿童（点击热带）

{value：“Fruit”，nested_values：[{value：'Tropical'}]}

3级儿童（点击菠萝）

{value：“Fruit”，nested_values：[{value：'Tropical'，nested_values：[{value：'Pineapple'}]}}}

等......递归地

我不知何故需要选择一个树元素，并将该特定元素的完整JSON结构/路径发送到Redux存储。

非常感谢任何帮助！

当前代码

createTree(data, isSub, lev) {
    let level = lev || 0;
    let children = [];
    for (let i in data) {
        if (typeof(data[i].nested_values) === 'object') { // Sub array found, build structure
            children.push(
                <div class={"filter-group level-" + (level)}>
                    <div class="filter-heading">{data[i].value}</div>
                    {this.createTree(data[i].nested_values, true, level)}
                </div>
            );
        } else { // No submenu, bottom of tree
            children.push(
                <span key={i}>
                    {data[i].value}               
                </span>
            );
        }
    }
    return <div className='filter-body open'>{children}</div>;
}

Dummy JSON

{
        "value": "Fruit",
        "occurrence_count": 5,
        "nested_values": [{
            "value": "Berries",
            "occurrence_count": 3,
            "nested_values": [{
                "value": "Strawberry",
                "occurrence_count": 1
            }, {
                "value": "Blackberry",
                "occurrence_count": 1
            }, {
                "value": "Raspberry",
                "occurrence_count": 1
            }, {
                "value": "Redcurrant",
                "occurrence_count": 1
            }, {
                "value": "Blackcurrant",
                "occurrence_count": 1
            }, {
                "value": "Gooseberry",
                "occurrence_count": 1
            }, {
                "value": "Cranberry",
                "occurrence_count": 1
            }, {
                "value": "Whitecurrant",
                "occurrence_count": 1
            }, {
                "value": "Loganberry",
                "occurrence_count": 1
            }, {
                "value": "Strawberry",
                "occurrence_count": 1
            }]
        }, {
            "value": "Tropical",
            "occurrence_count": 2,
            "nested_values": [{
                "value": "Pineapple",
                "occurrence_count": 1
            }, {
                "value": "Mango",
                "occurrence_count": 1
            }, {
                "value": "Guava",
                "occurrence_count": 1
            }, {
                "value": "Passion Fruit",
                "occurrence_count": 1
            }, {
                "value": "Dragon Fruit",
                "occurrence_count": 1
            }]
        }]
}

Answer 1

应用此基本的递归模式（不要陷入复杂的函数中）

或多或少，您可以通过以下方式做到这一点：

const Component = ({data}) => <div>
      <Row>{data['value']}</Row>
      {data['nested_values'].map(data=><RComponent data={data}/>}
</div>
const RComponent= (props)=><Component{...props}/>

export default Component

然后，在您需要时：

<Component data={data}/>

React递归树传递JSON路径

1 个答案: