javascript - 如何有条件地为材质ui TreeView组件设置扩展道具

问题描述

我正在尝试使用材质 ui创建一个树选择组件，例如来自antd tree-select的组件。我有一个材质-ui TextField和TreeView组件，一个在另一个之下。最初我希望树视图折叠起来，用户应该能够手动展开它。但是当用户在文本字段中键入一些文本时，我希望扩展具有相似文本的节点。我有在树中搜索文本并获取匹配节点的节点 ID 的代码。有一个叫 prop expanded，它允许我们设置需要扩展的节点 ID 列表。请参阅下面的代码。

import React from 'react';
import PropTypes from 'prop-types';
import { fade, makeStyles } from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';
import Typography from '@material-ui/core/Typography';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import TextField from '@material-ui/core/TextField';

const useTreeItemStyles = makeStyles(theme => ({
  root: {
    color: theme.palette.text.secondary,
    '&:focus > $content': {
      backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,
      color: 'var(--tree-view-color)',
    },
  },
  content: {
    color: theme.palette.text.secondary,
    paddingRight: theme.spacing(1),
    fontWeight: theme.typography.fontWeightMedium,
    '$expanded > &': {
      fontWeight: theme.typography.fontWeightRegular,
    },
  },
  group: {
    marginLeft: 12,
    borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
  },
  expanded: {},
  label: {
    fontWeight: 'inherit',
    color: 'inherit',
    width: 'auto'
  },
  labelRoot: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0.5, 0),
  },
  labelIcon: {
    marginRight: theme.spacing(1),
  },
  labelText: {
    fontWeight: 'inherit',
    flexGrow: 1,
  },
}));

const useStyles = makeStyles({
  root: {
    height: 264,
    flexGrow: 1,
    maxWidth: 400,
  },
});

const data = [
  {
    name: 'world',
    id: 'world',
    children: [
      {
        name: 'asia',
        id: 'asia',
        children: [
          {
            name: 'india',
            id: 'india',
            children: [
              {
                name: 'tamilnadu',
                id: 'tamilnadu',
                children: [
                  {
                    name: 'chennai',
                    id: 'chennai',
                    children: [
                      {
                        name: 'thiruvanmiyur',
                        id: 'thiruvanmiyur'
                      },
                      {
                        name: 'kelambakkam',
                        id: 'kelambakkam'
                      }
                    ]
                  },
                  {
                    name: 'madurai',
                    id: 'madurai',
                    children: [
                      {
                        name: 'mattuthavani',
                        id: 'mattuthavani'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'andhrapradesh',
                id: 'andhrapradesh',
                children: [
                  {
                    name: 'vijayawada',
                    id: 'vijayawada',
                    children: [
                      {
                        name: 'satyanarayanapuram',
                        id: 'satyanarayanapuram'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'telangana',
                id: 'telangana',
                children: [
                  {
                    name: 'hyderabad',
                    id: 'hyderabad',
                    children: [
                      {
                        name: 'dilsukhnagar',
                        id: 'dilsukhnagar'
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            name: 'china',
            id: 'china',
            children: [
              {
                name: 'hubei',
                id: 'hubei',
                children: [
                  {
                    name: 'wuhan',
                    id: 'wuhan'
                  }
                ]
              }
            ]
          },
          {
            name: 'japan',
            id: 'japan',
            children: [
              {
                name: 'place honshu',
                id: 'honshu',
                children: [
                  {
                    name: 'tokyo',
                    id: 'tokyo'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'north america',
        id: 'northamerica',
        children: [
          {
            name: 'usa',
            id: 'usa',
            children: [
              {
                name: 'place california',
                id: 'california',
                children: [
                  {
                    name: 'losangeles',
                    id: 'losangeles',
                    children: [
                      {
                        name: 'hollywood',
                        id: 'hollywood'
                      }
                    ]
                  },
                  {
                    name: 'sanfrancisco',
                    id: 'sanfrancisco',
                    children: [
                      {
                        name: 'goldengate',
                        id: 'goldengate'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'florida',
                id: 'florida',
                children: [
                  {
                    name: 'miami',
                    id: 'miami',
                    children: [
                      {
                        name: 'place Vizcaya',
                        id: 'Vizcaya'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

function StyledTreeItem(props) {
  const { labelText, ...other } = props;
  const classes = useTreeItemStyles();
  return (
    <TreeItem
      label={
        <div className={classes.labelRoot}>
          <Typography variant="body2" className={classes.labelText}>
            {labelText}
          </Typography>
        </div>
      }
      classes={{
        root: classes.root,
        content: classes.content,
        expanded: classes.expanded,
        group: classes.group,
        label: classes.label
      }}
      {...other}
    />
  );
}

StyledTreeItem.propTypes = {
  bgColor: PropTypes.string,
  color: PropTypes.string,
  labelIcon: PropTypes.elementType,
  labelInfo: PropTypes.string,
  labelText: PropTypes.string.isRequired,
};

const filterFunc = (value, searchTerm) => value.toLowerCase().includes(searchTerm);

export default function PlaceTreeView() {
  const classes = useStyles();
  const [searchTerm, setSearchTerm] = React.useState('');
  const [expandNodes, setExpandNodes] = React.useState([]);
  const [options, setOptions] = React.useState(data);
  const handleSearchTermChange = event => {
    setSearchTerm(event.target.value);
    searchTree(event.target.value);
  }

  const getTreeItemsFromData = treeItems => {
    return treeItems.map(treeItemData => {
      let children = undefined;
      if (treeItemData.children && treeItemData.children.length > 0) {
        children = getTreeItemsFromData(treeItemData.children);
      }
      return (
        <StyledTreeItem
          key={treeItemData.id}
          nodeId={treeItemData.id}
          labelText={treeItemData.name}
          children={children}
          highlight={filterFunc(treeItemData.name, searchTerm)}
        />
      );
    });
  };

  const searchTree = searchTerm => {
    searchTerm = searchTerm.toLowerCase().trim();
    if(searchTerm === '') {
      return data;
    }
    let nodesToExpand = [];
    function dig(list) {
      return list.map(treeNode => {
        const { children } = treeNode;
        const match = filterFunc(treeNode.name, searchTerm);
        const childList = dig(children || [], match);
        if(match || childList.length) {
          nodesToExpand.push(treeNode.id);
          return {
            ...treeNode,
            children: childList
          };
        }
        return null;
      })
      .filter(node => node);
    }
    setExpandNodes(nodesToExpand);
    setOptions(dig(data));
  }

  let treeViewProps = {};
  if(searchTerm.trim() !== '') {
    treeViewProps = { expanded: expandNodes }
  }

  console.log('treeviewprops', treeViewProps);
  return (
      <div style={{margin: '20px', display: 'flex', flexDirection: 'column'}}>
        <TextField style={{width: '200px', marginBottom: '10px'}} id="standard-basic" label="Search place" onChange={handleSearchTermChange} />
        <TreeView
          className={classes.root}
          defaultCollapseIcon={<ArrowDropDownIcon />}
          defaultExpandIcon={<ArrowRightIcon />}
          // expanded={expandNodes}
          {...treeViewProps}
          defaultEndIcon={<div style={{ width: 24 }} />}
        >
          {getTreeItemsFromData(options)}
        </TreeView>
      </div>
    );
  }

如果我使TreeView组件受控并设置expanded=[]为初始状态。然后当文本字段中没有文本时，它不会让用户在开始时手动展开。如果我设置expanded=[list of all nodes in tree]为初始状态，那么它会显示默认展开的所有节点。但我不想那样。我希望它最初折叠到根目录，然后让用户手动展开节点。所以我试图使expanded道具有条件。但后来我得到这个错误

Material-UI: A component is changing an uncontrolled TreeView to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled TreeView element for the lifetime of the component.

我该怎么做才能避免此错误并有条件地设置道具？或者有没有其他方法可以实现我想要实现的目标？

标签： javascriptreactjstreeviewmaterial-uiantd

javascript - 如何有条件地为材质ui TreeView组件设置扩展道具

问题描述

解决方案

推荐阅读