reactjs - 将 React TypeScript 转换为 React js

Question

我是编码新手，我想知道是否有人可以告诉我如何将Sandbox 上共享的代码从“React TypeScript”转换为“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"));

先感谢您。

标签： reactjstypescript

Answer 1

一个好的开始是删除类型，例如：

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

继续这样做，直到你的 React 代码中没有类型。