reactjs 相关问题

React是一个用于构建用户界面的JavaScript库。它使用声明范式，旨在既高效又灵活。

我如何创建一个可以在印度使用的条带订阅。帮助我集成 3D 安全和所有其他需要的东西

实际上，问题是我无法创建解决印度付款问题的订阅，任何人都可以帮忙当我输入印度的条纹测试卡详细信息时出现错误，这是缺点......

reactjs node.js stripe-payments

回答 1 投票 0

我测试创建反应，但我的朗姆酒错误：0308010C $npx create-react-app 我的 $cd 我的 $npm 开始 > [email protected] 开始 > 反应脚本启动 i｢wds｣：项目运行在http://192.168.56.1/ 我｢wds｣：

node.js reactjs

回答 2 投票 0

切换错误，斜向移动而不是直线移动

我正在研究切换，这是我的代码：从“./Toggle.module.scss”导入样式；导出默认函数 Toggle() { 返回（ <> 我正在研究切换，这是我的代码： import style from "./Toggle.module.scss"; export default function Toggle() { return ( <> <input type="checkbox" id="toggle" className={style.toggle} /> <label htmlFor="toggle" className={style.label} /> </> ); } .toggle { height: 0; width: 0; opacity: 0; } .label { width:60px; height: 30px; border-radius:30px; display: block; background-color: #ebebeb; box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset; left:10px; padding-left: 5px; position: relative; &::after { content: ''; position: absolute; width: 23px; height: 23px; border-radius: 50px; background-color: green; top: 50%; transform: translateY(-50%); transition: 0.3s; } } .toggle:checked ~ .label::after{ transform: translateX(32px); } 最初，旋钮完全位于开关内部的中心，但是当我单击它时，它会进行对角线移动，而不是向右直线移动。详情请参阅codesandbox。 https://codesandbox.io/p/sandbox/red-microservice-gq48pj?file=%2Fsrc%2Findex.js 您还需要将 translateY: -50% 添加到切换转换中，如果不这样做，该值将不会添加到转换中： .toggle { height: 0; width: 0; opacity: 0; } .label { width: 60px; height: 30px; border-radius: 30px; display: block; background-color: #ebebeb; box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2) inset; left: 10px; padding-left: 5px; position: relative; &::after { content: ""; position: absolute; width: 23px; height: 23px; border-radius: 50px; background-color: green; top: 50%; transform: translateY(-50%); transition: 0.3s; } } .toggle:checked ~ .label::after { transform: translateX(32px) translateY(-50%); } 一种解决方案是： &::after { ... top: 4px transform: translateX(0); ... } .toggle:checked ~ .label::after { transform: translateX(28px); } 注意从translateY 到translateX，因为你是水平移动，所以根本不需要设置Y 轴。

css reactjs sass

回答 2 投票 0

如何在React JS中上传图片？

图片* ... <div className="mb-1"> Image <span className="font-css top">*</span> <div className=""> <input type="file" id="file-input" name="ImageStyle"/> </div> </div> 这是我提供的代码片段，我用来在 React js 中从设备中选取文件，使用这个我可以选择文件并且文件名也会显示我现在想要的是将这个文件存储在 S3 或任何地方，并从那里获取它的 URL，然后使用 fetch api 调用将其发布到我的服务器。 import React, { useState } from "react"; // Define a functional component named UploadAndDisplayImage const UploadAndDisplayImage = () => { // Define a state variable to store the selected image const [selectedImage, setSelectedImage] = useState(null); // Return the JSX for rendering return ( <div> {/* Header */} <h1>Upload and Display Image</h1> <h3>using React Hooks</h3> {/* Conditionally render the selected image if it exists */} {selectedImage && ( <div> {/* Display the selected image */} <img alt="not found" width={"250px"} src={URL.createObjectURL(selectedImage)} /> <br /> <br /> {/* Button to remove the selected image */} <button onClick={() => setSelectedImage(null)}>Remove</button> </div> )} <br /> {/* Input element to select an image file */} <input type="file" name="myImage" // Event handler to capture file selection and update the state onChange={(event) => { console.log(event.target.files[0]); // Log the selected file setSelectedImage(event.target.files[0]); // Update the state with the selected file }} /> </div> ); }; // Export the UploadAndDisplayImage component as default export default UploadAndDisplayImage; 从文件上传图像并将其显示在反应页面上，还可以获取我们选择图像时状态下的图像对象要在网页上显示，您必须使用 URL.createObjectURL(fileObject) 将图像对象转换为对象 import React, { Component } from "react"; class DisplayImage extends Component { constructor(props) { super(props); this.state = { image: null }; // if we are using arrow function binding is not required // this.onImageChange = this.onImageChange.bind(this); } onImageChange = event => { if (event.target.files && event.target.files[0]) { let img = event.target.files[0]; this.setState({ image: URL.createObjectURL(img) }); } }; render() { return ( <div> <div> <div> <img src={this.state.image} /> <h1>Select Image</h1> <input type="file" name="myImage" onChange={this.onImageChange} /> </div> </div> </div> ); } } export default DisplayImage; 如果您想上传图像并将其发布到 API。然后安装react-image-uploader。它通过发出 POST 请求将图像保存到您的本地端口以及数据库中。这段代码可以让你上传图片到服务器，后端代码是用nestjs写的，并显示要上传的图片。我用的是formdata。 import React, { useEffect, useState } from "react"; function Product() { const { REACT_APP_REST } = process.env; const [file, setFile] = useState([]); const handleFile = event => { setFile( URL.createObjectURL(event.target.files[0]) ); const formData = new FormData(); formData.append("fileupload", event.target.files[0]); fetch(REACT_APP_REST + "/product/upload", { method: 'POST', body: formData, dataType: "jsonp" }) }; return ( <> <Container fluid> <Col md="4"> <Card className="card-user"> <img src={file} /> <Card.Body> <Form.Group> <label>IMAGE</label> <Form.Control type="file" required="required" onChange={handleFile} ></Form.Control> </Form.Group> </Card.Body> <hr></hr> </Card> </Col> </Container> </> ); } export default Product; 使用 react-uploady 你可以很容易地做到这一点： import React from "react"; import Uploady from "@rpldy/uploady"; import UploadButton from "@rpldy/upload-button"; import UploadPreview from "@rpldy/upload-preview"; const filterBySize = (file) => { //filter out images larger than 5MB return file.size <= 5242880; }; const App = () => ( <Uploady destination={{ url: "my-server.com/upload" }} fileFilter={filterBySize} accept="image/*" > <UploadButton /> <UploadPreview /> </Uploady> ); 无法在“URL”上执行“createObjectURL”：重载解析失败。由于某种原因，我无法使用 URL.createObjectURL(image) 作为 const [image, setImage] = useState(null); const [imgURL, setImgURL] = useState(); <img src={URL.createObjectURL(image)}/> 所以我将Url保存在状态中，以便在按钮点击方法上即时显示。这有效！ setImgURL(URL.createObjectURL(image)); 不幸的是，当我使用useEffect时，我仍然遇到同样的错误。 useEffect(() => { setImgURL(URL.createObjectURL(image)); }, [image]);

reactjs

回答 6 投票 0

强制重新加载 useQuery（而不是重新获取）

最近遇到一个问题。假设有几个组件 [A1、A2、A3] 被渲染。渲染了另一个组件 [B]。 B 在任何层次结构中都与 A1、A2、A3 无关...

reactjs reload react-query

回答 1 投票 0

如何在Python中使用ArcGIS Rest API更新要素图层（发布请求）

为什么这无法正常工作ArcGIS Rest API，我做错了什么？我正在尝试更新 MapServer 内部的要素图层，我内部有 3 个要素图层，可在 id 0 1 和 3 处使用，我正在尝试

reactjs post arcgis arcgis-js-api arcgis-server

回答 1 投票 0

“npm run build”经常冻结我的整个服务器

也许 75-80% 的情况下，我可以在 EC2 Linux 服务器上运行 git pull，然后 npm run build 来创建 React 应用程序的生产就绪版本。然而，有时，运行 npm run build 后，...

reactjs

回答 3 投票 0

React Router SSR：useLocation()只能在<Router>组件的上下文中使用

我遵循了本指南https://reactrouter.com/en/main/guides/ssr#without-a-data-router 我正在服务器渲染这样的应用程序 // ... 我遵循了本指南https://reactrouter.com/en/main/guides/ssr#without-a-data-router 我正在服务器渲染这样的应用程序 <StaticRouter location={req.url}> <Routes> // ... </Routes> </StaticRouter> 我的一条路线包含此代码 import React from 'react' import { useLocation } from 'react-router' export function SceneButton(props: SceneButtonProps) { const location = useLocation() // ... return <button>Scene</button> } 当我渲染应用程序时，出现此错误 useLocation() may be used only in the context of a <Router> component. 如何以浏览器端和服务器端都有效的方式获取此处的位置？另外，奇怪的是，React Router 文档真的希望我使用 Remix，但我的应用程序很大，我无力重写它。如果您使用的是 StaticRouter 中的 react-router-dom/server import { StaticRouter } from "react-router-dom/server"; 然后我怀疑您还需要从同一个库导入 useLocation 钩子，例如react-router-dom 而不是较低级别的 react-router 库。更新 SceneButton 以从 react-router-dom 导入： import React from 'react'; import { useLocation } from 'react-router-dom'; export function SceneButton(props: SceneButtonProps) { const location = useLocation(); // ... return <button>Scene</button>; }

reactjs typescript react-router

回答 1 投票 0

为什么我必须强制重新渲染才能显示任何内容？

信息我正在尝试通过在反应中利用虚拟化来实现无限滚动。为此，我使用包 @tanstack/react-query 和 @tanstack/react-virtual。问题我已经成功了...

reactjs

回答 1 投票 0

如何在相对父级中垂直定位元素

我正在制作拨动开关，我想将拨动旋钮完全垂直地放置在开关内。以下是我尝试实现此目标的方法：从“./Toggle.module.scss”导入样式；出口

html css reactjs sass

回答 1 投票 0

如何在 Next JS 13 中添加流派元标记

我想在我的项目中添加流派元数据，但是当我在元数据中使用其他元数据来创建我的导出 html 时，我得到以下标签 meta name="类型" content="商品价格"/> 但我错了