标签: reactjs

export const EnvironmentProvider: React.FC<EnvironmentProps> = ({ children }) => (
  <EnvironmentContext.Provider value={{
    APP_NAME: import.meta.env.VITE_APP_NAME, 
    GQL_URI: import.meta.env.VITE_GQL_URI
  }}>
    { children }
  </EnvironmentContext.Provider>
)

当使用import.meta 加载环境变量时，vscode 只识别 url 变量...那么我如何告诉 typescript import.meta 中有自定义变量？

我有一个网络应用程序需要访问相机，但我想手动请求相机权限，因为如果网络应用程序自动检测到相机权限，它会“为时已晚”。

我需要的是请求许可，然后我可以渲染一个渲染相机的第 3 方 JavaScript 函数。

使用 React Native 很容易，但是使用普通的 React，对于 Chrome 和 Safari，我找不到一种方法来询问何时需要这些权限。

任何想法？

我正在使用react-query的useMutation()来发布数据，我能够成功发布数据。\n但是，我在成功发布数据后返回的响应我想使用该响应并将其显示在组件中

为此，我正在使用状态，并且我在 useMutation() 挂钩的 onSuccess 函数内设置状态，但它给了我错误\n错误：\nTypeError: 无法读取未定义\nat Object.onSuccess (UpdateMIDPPage. jsx:80)\nat 突变.js:86

下面是我的代码供参考

const UpdateMIDPPage = ({ open, handleClose }) => {\n  const classes = useStyles()\n  const [tidpFiles, setTidpFiles] = useState([])\n  const [reportFile, setReportFile] = useState('')\n  const [tidpWarnings, setTidpWarnings] = useState([])\n  const [reportWarnings, setReportWarnings] = useState([])\n  const [toggleVisibleIcon, setToggleVisibleIcon] = useState(true)\n\n  const { mutate, data, isSuccess, isLoading, isIdle, isError } = useMutation(\n    async (body) => {\n      const resp = await axios.post('http://localhost:4000/api/v1/midp/update', body)\n      return resp.data\n    },\n    {\n      onSuccess: …

我有一个 React 组件，它要么采用to(react-router-dom prop) 要么采用hrefprop，具体取决于我想将用户重定向到哪里；无论是在应用程序内还是外部 URL。Typescript 抱怨我的类型

类型“LinkType”上不存在属性“to”。

类型“LinkType”上不存在属性“href”。

这就是我定义我的类型的方式

import React from 'react';
import { Link } from 'react-router-dom';

interface LinkBase {
  label: string;
  icon?: JSX.Element;
}

interface RouterLink extends LinkBase {
  to: string;
}

interface HrefLink extends LinkBase {
  href: string;
}

type LinkType = RouterLink | HrefLink;

export function NavLink(props: LinkType) {
  const { to, label, icon, href } = props;  // TS complains about those to and href

  return(
    {to ? ( …

我使用 React-hook-form V7 和 Material UI 5 自动完成输入。我在自动完成中的延迟加载值在第一次提交单击时（但在第二次单击时）未验证。怎么了？

  useEffect(() => {
    setItemList([
      { id: 1, name: "item1" },
      { id: 2, name: "item2" }
    ]);
    setItemIdSelected(2);
  }, []);

  [...]

  <Autocomplete
    options={itemList}
    getOptionLabel={(item) => (item.name ? item.name : "")}
    getOptionSelected={(option, value) =>
      value === undefined || value === "" || option.id === value.id
    }
    value={
      itemIdSelected
        ? itemList.find((item) => item.id === itemIdSelected)
        : ""
    }
    onChange={(event, items) => {
      if (items !== null) {
        setItemIdSelected(items.id);
      }
    }}
    renderInput={(params) => (
      <TextField …

我正在使用 Material-UI React 库，并且我需要TextField在单击或聚焦时更改 a 的边框颜色（视情况而定）。

这是我尝试过的：

const useFormFieldStyles = makeStyles((theme) => ({
  input: {
    borderWidth: '1px',
    fontWeight: 'bold',
    '& .MuiOutlinedInput-input:focused': {
      borderColor: 'green',
    }
  }
}));

然而，borderColor尽管我付出了一切努力，它仍然是蓝色的。

我怎样才能做到这一点？

我只想在我的项目中包含材质 ui 对话框。我不想在我的项目中包含其他组件。所以我不想只是为了使用对话框而安装完整的材料用户界面。有人能帮忙吗？

https://material-ui.com/components/dialogs/

使用 CloudFlare 等 CDN 提供商在边缘托管 SPA 应用程序（即 React），但在常规 VPS/专用服务器上提供 SPA 应用程序使用的 API 后端，是否有任何重要的好处？

更常见的方法似乎是在 CDN 上托管 SPA，并拥有 AWS Lambda 或 Cloudflare Workers 等无服务器后端。我的应用程序和后端目前都在美国数据中心的 DigitalOcean 之类的 VPS 上提供服务，但分析显示我的用户也来自地球的另一半。

是否值得将 React 应用程序从 VPS 服务器迁移到 CDN？

谢谢

我是 React js 的新手，并且一直在构建一些工作得非常好的东西。但到目前为止，要进行的 api 调用是在各自的组件内定义的。因此，如果要对 IP 或端点进行任何更改，我需要在每个地方进行更改。如何将所有 api 调用分离到一个文件中，并在相应的组件文件中对结果执行操作。

下面是一个例子：

import axios from "axios";

function get_all_user(){
axios({
      method: "get",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: "http://127.0.0.1:8000/app/users/",
    })
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      })
      
}

function get_single_user(userid){

axios({
      method: "get",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: "http://127.0.0.1:8000/app/users/"+userid,
    })
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      })
      
}

在每个组件中我都需要进行 api 调用。所有这些 api 调用都需要位于一处。任何帮助表示赞赏。

我正在尝试使用newData中的值更新数组（数据）中所有对象中的car值，我的代码是：

import "./styles.css";

const data = [
  { id: 1, car: "Toyota 2020", owner: "BM" },
  { id: 2, car: "Nissan", owner: "DK" },
  { id: 3, car: "Mazda", owner: "JA" },
  { id: 4, car: "Ford", owner: "DS" }
];
const newData = ["Audi", "Bentley", "BMW", "Buick"];


export default function App() {
  return (
    <div className="App">
      {data?.map((item) => {
        return <li key={item.id}>{item.car}</li>;
      })}
    </div>
  );
}

const data = [
  { id: …