React recursive tree pass JSON path

问题

I'm currently creating a Recursive tree using React and have hit another road block. I am trying to basically pass the path from within my JSON structure. So for each child I want to pass a object prop that looks something like this...

Level 1 child (Clicked on Fruit)

{value: "Fruit"}

Level 2 child (Clicked on Tropical)

{value: "Fruit", nested_values: [{ value: 'Tropical'}] }

Level 3 child (Clicked on Pineapple)

{value: "Fruit", nested_values: [{ value: 'Tropical', nested_values:[{ value: 'Pineapple' }]}] }

Etc... Recursively

I somehow need to get to the point where you select a tree element and the full JSON structure / path for that particular element is sent to a Redux store.

Any help would be much appreciated!

Current Code

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
            }]
        }]
}

回答1:

Apply this basic recursive pattern (do not fall into complex functions)

More or less, you could do it in this way:

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 

Then, whenever you need it:

<Component data={data}/>

来源：https://stackoverflow.com/questions/42207337/react-recursive-tree-pass-json-path