在 JSX 中合并两个导入的模块答案

【问题标题】：Combine two imported modules in JSX在 JSX 中合并两个导入的模块
【发布时间】：2021-11-26 01:20:41
【问题描述】：

有没有办法将两个导入的模块合二为一，并在生成的模块中拥有所有功能？
我所拥有的是：

import {TextField as MUITextField} from "@mui/material";
import {TextInput as RaTextInput} from "react-admin";

我最终想要的东西类似于

const TextInput = {...RaTextInput, ...MUITextField}

这当然行不通。

基本上，我想要一个TextInput 组件，附加功能为TextField，即我想像这样使用前者：

<List filters={[
  <TextInput
    source="some_source"
    label="Search" 
    alwaysOn  
    InputProps={{
      startAdornment: (
        <InputAdornment position="start">
          <AccountCircle />
        </InputAdornment>
      ),
    }}
  />
]}

【问题讨论】：

标签： material-ui jsx react-admin

【解决方案1】：

不完全是我想要的，但下面的技巧现在已经足够好了

const NewTextInput = (props: any): JSX.Element => {
  return <TextInput {...props} {...MuiTextField} />;
};

【讨论】：