मैं प्रतिक्रिया करने के लिए नया हूं और मैं प्रतिक्रिया में एक TreeView घटक बना रहा हूं जहां मैं डेटा लाता हूं क्योंकि नोड्स का विस्तार किया जाता है। मैं सामग्री UI से ट्री व्यू का उपयोग कर रहा हूं: https://material-ui.com/api /वृक्ष-दृश्य/

मैंने नीचे घटक बनाया है जो एक नोड का विस्तार होने पर डेटा प्राप्त करता है। MyTreeItem एक कस्टम संस्करण है जो एक फ़ेच कॉल के साथ मूल का विस्तार करता है। लेकिन मैं उलझन में हूं कि चाइल्डनोड्स को कैसे प्रदर्शित किया जाए। मैं यह कैसे कर सकता हूँ?

import ReactDOM from "react-dom";
import React from "react";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";
const { useState, useCallback } = React;

export default function MyTreeItem({ id, name }) {
  const [childNodes, setChildNodes] = useState(null);
  const [expanded, setExpanded] = React.useState([]);

  function fakeAjax(url) {
    return fetch(url).then(res => {
      if (!res.ok) {
        throw new Error("HTTP error " + res.status);
      }
      return res.json();
    });
  }

  function fetchChildNodes(id) {
    // Should in reality be "URL/id", but fake JSON for now
    return fakeAjax(`https://api.myjson.com/bins/1aqhsc`);
  }

  const handleChange = (event, nodes) => {
    const expandingNodes = nodes.filter(x => !expanded.includes(x));
    setExpanded(nodes);
    if (expandingNodes[0]) {
      const childId = expandingNodes[0];
      fetchChildNodes(childId).then(result =>
        setChildNodes(result.children.map(node => <MyTreeItem {...node} />))
      );
    }
  };

  return (
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      expanded={expanded}
      onNodeToggle={handleChange}
    >
      {/*The node below should act as the root node for now */}
      <TreeItem nodeId="1" label="Applications">
        {/*The childnodes should be here*/}
      </TreeItem>
    </TreeView>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyTreeItem />, rootElement);

0
John 25 पद 2019, 21:00

1 उत्तर

सबसे बढ़िया उत्तर

आपके उदाहरण में, ऐसा लगता है, आप उस पेड़ का निर्माण करने की कोशिश कर रहे हैं जहाँ प्रत्येक नोड जिसमें बच्चे हैं, वह भी एक पेड़ होगा।

इस मामले में, रेंडर इस तरह दिखेगा:

{/*The node below should act as the root node for now */}
<TreeItem nodeId={props.id} label={props.name}>
    {childNodes || [<div key="stub" />]} // stub div is used so user could see expand icon
</TreeItem>
// you also need to pass props for root items
ReactDOM.render(<MyTreeItem id="1" name="Applications" />, rootElement);

आप यहां कार्य कोड देख सकते हैं: https://codesandbox.io/s/material-demo- k5ol6

एक पेड़ को प्रस्तुत करने के कई तरीके हैं। एक पेड़ की संरचना को मॉडल करना और इसे इस तरह प्रस्तुत करना है ताकि प्रत्येक नोड जिसमें बच्चे हों, स्थानीय राज्य के साथ एक और पेड़ नहीं होगा, जैसे आपके कार्यान्वयन में। इस दृष्टिकोण का लाभ यह है कि आप सहारा के माध्यम से एक पूरा पेड़ प्रदान कर सकते हैं, न केवल इसे 'विस्तार' क्रिया पर लाकर।

इस तरह के दृष्टिकोण का उदाहरण यहां दिया गया है: https://codesandbox.io/s/material-demo- h6zfe

साथ ही, आप पेड़ को एक सूची के रूप में प्रस्तुत कर सकते हैं, जहां प्रत्येक नेस्टेड स्तर में शैलियों के माध्यम से निर्दिष्ट ऑफ़सेट होता है। इसका एक फायदा तब होता है जब आपको प्रत्येक स्तर पर अलग से पेजिनेशन करने की आवश्यकता होती है (यदि एक स्तर में बहुत सारी वस्तुएं हैं)। कार्यान्वयन ऊपर के मामलों में उतना आसान नहीं है, इसलिए मैं एक उदाहरण नहीं दूंगा।

4
SciFiThief 25 पद 2019, 19:39