reactjs - 如何在 React.js 和 ASP.NET Core 中单击树节点上打开组件？

问题描述

我是 react.js 的新手。页面有两个 div。在左侧 div 中，我有 treeview 组件。点击不同的节点级别，会在右边的div上打开不同的组件。

我正在提供我的树视图代码。请让我知道需要做什么。请修改 react.js 代码。

级别 1 的节点单击右侧面板上的打开“Add_Item”组件。
Level2 的节点单击右侧 * 面板上的打开“Add_SubItem”组件。
第 3 级的节点单击右侧面板上的打开“编辑子项”组件。
第 4 级的节点单击右侧面板上的打开“Edit_ItemTemplate”组件。

谢谢

应用程序.js：

import React, { Component } from 'react';
import axios from 'axios';
import XMLParser from 'react-xml-parser';

class App extends Component {
    render() {
        return (
            <div id="TreeView">
                <h3>TreeView</h3>
                <TreeView />
            </div>
        );
    }
}

class Node {
    description = 'n/a';
    id = -1;
    linkpagename = '';
    isActive = false;
    nodes = [];

    constructor(description, id, linkpagename) {
        this.description = description;
        this.id = id;
        this.linkpagename = linkpagename;
    }

    static nodesFromXml(xml) {
        const map = (entity, nodes) => {
            const keyID = entity.attributes['key-id'];
            const descriptionText = entity.children[entity.children.findIndex(child => child.name === 'description')].value;
            const entities = entity.children.filter(child => child.name === 'entity');
            const linkPageName = entity.attributes['link-page-name'];
            const node = new Node(descriptionText, keyID, linkPageName);
            nodes.push(node);
            entities.forEach(entity => map(entity, node.nodes));
        }

        const parsedData = new XMLParser().parseFromString(xml);
        const entities = parsedData.children.filter(child => child.name === 'entity');
        const nodes = [];
        entities.forEach(entity => map(entity, nodes));
        return nodes;
    }
}

class TreeView extends React.Component {
    constructor(props) {
        super(props);
        this.state = { nodes: [] }
        this.toggleNode = this.toggleNode.bind(this);
    }

    componentDidMount() {
        axios
            .get('tree.xml', { "Content-Type": "application/xml; charset=utf-8" })
            .then(response => this.setState({ nodes: Node.nodesFromXml(response.data) }));
    }

    render() {
        const nodes = this.state.nodes;
        return (
            <ul>
                {nodes.map(node => (
                    <TreeNode key={node.id} node={node} onToggle={this.toggleNode}   />
                ))}
            </ul>
        )
    }

    toggleNode(node) {
        if (node.nodes.length === 0)
            return;

        function _toggleNode(currentNode, node) {
            if (currentNode.id === node.id) {
                currentNode.isActive = !currentNode.isActive;
            }
            else {
                currentNode.nodes.forEach(childNode => _toggleNode(childNode, node));
            }
        }

        const nodes = this.state.nodes;
        nodes.forEach(currentNode => _toggleNode(currentNode, node));
        this.setState(state => state.nodes = nodes);
    }
}

class TreeNode extends React.Component {
    render() {
        const node = this.props.node;
        const onToggle = this.props.onToggle;
        let acitveChildren = null;
        if (node.isActive && node.nodes.length > 0) {
            acitveChildren = <ul>
                {node.nodes.map(node => (
                    <TreeNode key={node.id} node={node} onToggle={onToggle} />
                ))}
            </ul>;
        }

        return (
            <li key={node.id} onClick={(event) => { event.stopPropagation(); onToggle(node);  }} >
                {node.description} 
                {acitveChildren}
             
                
            </li>
        )
    }
}

export default App;

树.xml：

    <?xml version="1.0" standalone="yes"?>
    <tree>
        <entity id="e11" key-id="1" link-page-name="Add_Item">
            <description>Service</description>
            <image>images/plus.gif</image>
            <imageNode>images/de.gif</imageNode>
            <imageOpen>images/minus.gif</imageOpen>
            <entity id="e248" key-id="48" link-page-name="Add_SubItem">
                <description>A_test1_test1</description>
                <image>images/plus.gif</image>
                <imageNode>images/de.gif</imageNode>
                <imageOpen>images/minus.gif</imageOpen>
                <entity id="e3717" key-id="717" link-page-name="Edit_SubItem">
                    <description>A_SubItem1</description>
                    <image>images/plus.gif</image>
                    <imageNode>images/de.gif</imageNode>
                    <imageOpen>images/minus.gif</imageOpen>
                    <entity id="e45546" key-id="5546" link-page-name="Edit_ItemTemplate">
                        <description>A_Test_Template</description>
                        <image>images/paper.gif</image>
                        <imageOpen>images/paper.gif</imageOpen>
                    </entity>
                </entity>
            </entity>
            <entity id="e247" key-id="47" link-page-name="Add_SubItem">
                <description>A_test6</description>
                <image>images/plus.gif</image>
                <imageNode>images/de.gif</imageNode>
                <imageOpen>images/minus.gif</imageOpen>
                <entity id="e3716" key-id="716" link-page-name="Edit_SubItem">
                    <description>A_Item</description>
                    <image>images/plus.gif</image>
                    <imageNode>images/de.gif</imageNode>
                    <imageOpen>images/minus.gif</imageOpen>
                    <entity id="e45545" key-id="5545" link-page-name="Edit_ItemTemplate">
                        <description>temp1</description>
                        <image>images/paper.gif</image>
                        <imageOpen>images/paper.gif</imageOpen>
                    </entity>
                </entity>
            </entity>
    
        </entity>
        <entity id="e12" key-id="2" link-page-name="Add_Item">
            <description>Sales</description>
            <image>images/plus.gif</image>
            <imageNode>images/de.gif</imageNode>
            <imageOpen>images/minus.gif</imageOpen>
            <entity id="e230" key-id="30" link-page-name="Add_SubItem">
                <description>Gift Cards</description>
                <image>images/plus.gif</image>
                <imageNode>images/de.gif</imageNode>
                <imageOpen>images/minus.gif</imageOpen>
                <entity id="e3421" key-id="421" link-page-name="Edit_SubItem">
                    <description>Sample Card</description>
                    <image>images/plus.gif</image>
                    <imageNode>images/de.gif</imageNode>
                    <imageOpen>images/minus.gif</imageOpen>
                    <entity id="e43308" key-id="3308" link-page-name="Edit_ItemTemplate">
                        <description>greeting temp</description>
                        <image>images/paper.gif</image>
                        <imageOpen>images/paper.gif</imageOpen>
                    </entity>
                </entity>
                <entity id="e3422" key-id="422" link-page-name="Edit_SubItem">
                    <description>De Card</description>
                    <image>images/plus.gif</image>
                    <imageNode>images/de.gif</imageNode>
                    <imageOpen>images/minus.gif</imageOpen>
                    <entity id="e43309" key-id="3309" link-page-name="Edit_ItemTemplate">
                        <description>NS Temp</description>
                        <image>images/paper.gif</image>
                        <imageOpen>images/paper.gif</imageOpen>
                    </entity>
                </entity>
        
            </entity>
            <entity id="e215" key-id="15" link-page-name="Add_SubItem">
                <description>Chck</description>
                <image>images/plus.gif</image>
                <imageNode>images/de.gif</imageNode>
                <imageOpen>images/minus.gif</imageOpen>
                <entity id="e3671" key-id="671" link-page-name="Edit_SubItem">
                    <description>Add item</description>
                    <image>images/plus.gif</image>
                    <imageNode>images/de.gif</imageNode>
                    <imageOpen>images/minus.gif</imageOpen>
                    <entity id="e45438" key-id="5438" link-page-name="Edit_ItemTemplate">
                        <description>Ahhhh</description>
                        <image>images/paper.gif</image>
                        <imageOpen>images/paper.gif</imageOpen>
                    </entity>
                </entity>
                <entity id="e3450" key-id="450" link-page-name="Edit_SubItem">
                    <description>Advtttt</description>
                    <image>images/plus.gif</image>
                    <imageNode>images/de.gif</imageNode>
                    <imageOpen>images/minus.gif</imageOpen>
                    <entity id="e43577" key-id="3577" link-page-name="Edit_ItemTemplate">
                        <description>gggggg</description>
                        <image>images/paper.gif</image>
                        <imageOpen>images/paper.gif</imageOpen>
                    </entity>
            </entity>
            </entity>       
    
        </entity>
    </tree>

s.gif

标签： reactjsasp.net-core

reactjs - 如何在 React.js 和 ASP.NET Core 中单击树节点上打开组件？

问题描述

解决方案

推荐阅读