将 React TypeScript 转换为 React js

Question

I am new to coding and I was wondering if someone can show me how to convert this code that was shared on Sandbox from 'React TypeScript ' to 'React js'.

import * as React from "react";
import { render } from "react-dom";
import {TreeView, TreeItem, TreeItemProps, TreeViewProps} from "@material-ui/lab"
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";

function TreeItemX(props:TreeItemProps &{iconClickOnly:boolean}){
  // todo should call the original
  const handler:TreeItemProps['onLabelClick'] = evt => evt.preventDefault();
  const {iconClickOnly,...others} = props;
  const handledProps:TreeItemProps ={
    ...others,
    [props.iconClickOnly?'onLabelClick':'onIconClick']:handler
  }
  return <TreeItem {...handledProps} />
}
function TreeViewX(props:TreeViewProps&{defaultPreventedPrevents:boolean}){
  const {defaultPreventedPrevents,...others} = props;
  const originalOnNodeSelect = props.onNodeSelect;
  const preventingOnNodeSelect = (evt:React.ChangeEvent<{}>, nodeId:string&string[]) => {
    if(defaultPreventedPrevents){
      if(!evt.defaultPrevented){
        originalOnNodeSelect?.(evt,nodeId)
      }
    }else{
      if(evt.defaultPrevented){
        originalOnNodeSelect?.(evt,nodeId)
      }
    }

  }

  return <TreeView {...others} onNodeSelect={preventingOnNodeSelect}/> 

}

function App(){
  const [selected,setSelected] = React.useState<string>('')

  return (
    <TreeViewX 
      defaultPreventedPrevents={true}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />} 
      selected={selected} 
      onNodeSelect={(_,id)=>{
        setSelected(id);
      }}>
      <TreeItemX iconClickOnly nodeId='parent' label='Parent'>
        <TreeItemX iconClickOnly nodeId='child' label='Child'/>
      </TreeItemX>
    </TreeViewX>
  );

}

render(<App />, document.getElementById("root"));

Thank you in advance.

Answer 1

A good start would be to remove the types, for example:

function TreeItemX(props){
  const handler = evt => evt.preventDefault();
  const { iconClickOnly, ...others } = props;
  const handledProps ={
    ...others,
    [props.iconClickOnly ? 'onLabelClick' : 'onIconClick']
  }
  return <TreeItem {...handledProps} />
}

Just continue doing this, until you have your React code without the types in it.

Answer 2

Thank you so much for your assistance. I get the following error when I attempt to compile:

./src/App.js Line 17:3: Parsing error: Unexpected token

15 |...others, 16 | [props.iconClickOnly? 'onLabelClick': 'onIconClick']

17 | } | ^ 18 | return 19 | } 20 |

Below is the code so far:

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";
import "./App.css";


function TreeItemX(props){
  const handler = evt => evt.preventDefault();
  const { iconClickOnly, ...others } = props;
  const handledProps ={
    ...others,
    [props.iconClickOnly ? 'onLabelClick' : 'onIconClick']
  }
  return <TreeItem {...handledProps} />
}

function TreeViewX(props){
  const {defaultPreventedPrevents,...others} = props;
  const originalOnNodeSelect = props.onNodeSelect;
  const preventingOnNodeSelect = (evt, nodeId) => {
    if(defaultPreventedPrevents){
      if(!evt.defaultPrevented){
        originalOnNodeSelect?.(evt,nodeId)
      }
    }else{
      if(evt.defaultPrevented){
        originalOnNodeSelect?.(evt,nodeId)
      }
    }  
  }

  return <TreeView {...others} onNodeSelect={preventingOnNodeSelect}/> 

}

function App() {
  return (
    <div className="App">
    <TreeViewX 
      defaultPreventedPrevents={true}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />} 
      selected={selected} 
      onNodeSelect={(_,id)=>{
        setSelected(id);
      }}>
      <TreeItemX iconClickOnly nodeId='parent' label='Parent'>
        <TreeItemX iconClickOnly nodeId='child' label='Child'/>
      </TreeItemX>
    </TreeViewX>
  );
    </div>
  );
}

export default App;