jsx 相关问题

JSX是一种开源编程语言，或者是具有类和静态类型的AltJS。源代码被编译成高度优化的JavaScript。有关React的问题，请改用[reactjs]！

如何在 JSX 中更改悬停时的图像我正在尝试这样的事情：如何更改 JSX 中 hover 上的图像我正在尝试这样的事情： <img src={require('../../../common/assets/network-inactive.png')} onMouseOver={this.src = require('../../../common/assets/network.png')} onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} /> 我假设您正在 React 组件中编写此代码。如： class Welcome extends React.Component { render() { return ( <img src={require('../../../common/assets/network-inactive.png')} onMouseOver={this.src = require('../../../common/assets/network.png')} onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} /> ); } } 在这种情况下，定位this.src将不起作用，因为您本质上是在班级中寻找名为src的内容。例如 this.src 可以找到这样的东西： src = () => (alert("a source")) 但这不是您想要做的。您想要定位图像本身。因此您需要进入<img />上下文。你可以像这样轻松做到这一点： <img onMouseOver={e => console.log(e)} /> 从那里您可以定位 currentTarget 属性等。这将进入您的元素的上下文。所以现在你可以做这样的事情： <img src="img1" onMouseOver={e => (e.currentTarget.src = "img2")} /> 对于onMouseOut也可以做同样的事情。您可以对其他元素使用相同的方法，因为您肯定需要再次执行此操作。但要小心，因为这不是唯一的解决方案。在更大的项目中，您可能需要考虑使用存储（Redux），并传递 props 而不是改变元素。最好是在州内管理： class App extends Component { state = { img: "https://i.vimeocdn.com/portrait/58832_300x300" } render() { return ( <div style={styles}> <img src={this.state.img} onMouseEnter={() => { this.setState({ img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png" }) }} onMouseOut={() => { this.setState({ img: "https://i.vimeocdn.com/portrait/58832_300x300" }) }} /> </div> ) } }; https://codesandbox.io/s/5437qm907l 另一种非类方法： import arrow from "../images/arrow.svg"; import arrowHover from "../images/arrowHover.svg"; function Arrow() { const [over, setOver] = useState(false); return ( <div onMouseOver={() => setOver(true)} onMouseOut={() => setOver(false)} > <img src={over ? arrowHover : arrow} alt="arrow" width="50" height="50" /> </div> ) } 这是使用函数组件和打字稿的非类方法： interface IconProps { src?: string; srcOnHover?: string; alt?: string; } const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => ( <img src={src} alt={alt} onMouseOver={(e): void => { srcOnHover && (e.currentTarget.src = srcOnHover); }} onMouseOut={(e): void => { srcOnHover && (e.currentTarget.src = src || ''); }} /> ); 可以这样使用： <Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" /> 这里是一个在 React 中使用 onMouseEnter 和 onMouseLeave 处理图像 src 的好方法。贡献这个非基于类的组件版本。 import React, { useState } from 'react'; function imageHoveControl({) { let imageVar = { nonhovered: '/public/image.jpg' hovered: '/public/imageHover.jpg' } let selectorDown = imageVar.nonhovered.src let selectorUp = imageVar.hovered.src //Pop "up" to meet cursor on hover const [selectorImage, setSelectorImage] = useState(selectorDown); function handleMouseEnter() { setSelectorImage(selectorUp) } function handleMouseLeave() { setSelectorImage(selectorDown) } return ( <img className="rounded-full h-14 w-14 sm:h-20 sm:w-20 bg-contain mx-1" src={selectorImage} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} /> ) } 简单的方法：类 Home 扩展了 React.Component { 状态={ 图标：ICON_ONE } 渲染（）{ 返回（ this.setState({icon:ICON_TWO})} onMouseOut={() => this.setState({ 图标: ICON_ONE })} /> ） }

javascript reactjs jsx onmouseover onmouseout

回答 6 投票 0

单击按钮时反应函数不使用当前状态

我正在React中创建一个表单，该表单使用动态添加的字段集来存储我通过使用状态添加的联系人。如果用户愿意，这些字段集有一个按钮可以删除字段集。嗬...

reactjs react-hooks jsx

回答 2 投票 0

“FormData”：参数 1 不是“HTMLFormElement”类型，我收到此错误，但无法修复它，请帮助

``你的文本`const authForm = useRef(); const handleSubmit = (e) => { e.preventDefault(); //表单数据让 form = new FormData(authForm.current); 控制台.log(表单) } 这是表格的代码...

javascript html reactjs jsx

回答 1 投票 0

音频播放在React js中不起作用，并且在导入音频文件时出现错误

当尝试运行我的这段代码时，音频文件未播放。后来我尝试了...

javascript reactjs event-handling dom-events jsx

回答 2 投票 0

我在使用 for 循环生成 TSX React 组件时遇到问题

我通过创建一个井字棋游戏来学习 ReactJS 的基础知识，该游戏板最初开发如下：我通过创建井字棋游戏来学习 ReactJS 的基础知识，该游戏板最初开发如下： <div className="board-row"> <Square value={squares[0]} onSquareClick={() => handleSquareClick(0)} /> <Square value={squares[1]} onSquareClick={() => handleSquareClick(1)} /> <Square value={squares[2]} onSquareClick={() => handleSquareClick(2)} /> </div> ...依此类推2次。这是 Square 组件及其 Props： interface SquareProps { value: string; onSquareClick: () => void; } function Square({ value, onSquareClick }: SquareProps) { return ( <button className="square" onClick={onSquareClick}> {value} </button> ); } 当我单击每个 Square 组件时，会触发 onClick 函数，传递所单击 Square 的相应“id”，然后用 value Prop 填充，可以是“X”或“O” ，取决于传递的 squares 数组的相应索引。现在我尝试在不使用所有硬编码的情况下执行此操作，仅使用 for 循环。我编写了以下函数，但 Square Props value 和 onSquareClick 不适用于每个 Square 组件，因为它们应该像上面的代码一样。 const generateBoard = () => { const colsArr = Array(3); const cellsArr = Array(3); let cellId = 0; for (let i = 0; i < cellsArr.length; i++) { for (let j = 0; j < colsArr.length; j++) { colsArr[j] = ( <Square key={j} value={squares[cellId]} onSquareClick={() => handleSquareClick(cellId)} /> ); cellsArr[i] = ( <div key={i} className="board-row"> {colsArr} </div> ); cellId++; } } return cellsArr; }; 使用该代码，我可以显示 3x3 板，但是，例如，当单击第一个方块时，第 4 个和第 7 个（下面的两个）也被选中，我想避免它。您似乎正在混合数据和视图。相反，您的观点应该由您的数据驱动。此外，我会避免在 React 中完全使用 for 循环，而是依赖 Array.map，并使用钩子来防止数据不必要地重新初始化。让我们从定义数据开始： const data = useMemo(() => { return [...Array(3)].map((_, index) => [...Array(3)]) }, []); 这里我们创建一个包含 3 个项目的数组。请注意，通过将数组展开 (...) 到数组中，我们使其可迭代（因此我们可以在其上调用 .map 和其他迭代方法）。然后我们使用 .map 迭代该数组，并在每个外部数组项中创建另一个包含 3 个项的数组。这会导致类似的结果： [ [undefined, undefined, undefined], [undefined, undefined, undefined], [undefined, undefined, undefined] ] 我已将这个初始化包装在 useMemo 钩子中，这样它就不会重新运行，但是如果内容永远不会改变并且不依赖于组件的任何局部变量，或者如果您稍后可以更新数据，请将其放入 useMemo/useState 中。现在我们有了一些数据，我们可以对其进行迭代并创建一些组件。这可以直接在我们组件返回的 JSX 中完成： useReducer 这里我们首先返回一个 React 片段 return ( <> {data.map((_, i) => ( <div key={i} className="board-row"> {i.map((_, j) => ( <Square key={j} value={j} onClick={() => handleSquareClick(j)} /> ))} </div> ))} </> ); ，因为你不能在 React 组件中返回普通数组。然后在片段中，我们首先迭代 <></> 并为每个项目渲染 data，然后在此 div 中迭代每个子项目并渲染 div ，其值与我们正在迭代的项目匹配结束了。请注意，在这两个级别上，我们都应用了 Square，以便 React 可以跟踪项目。目前，我们只是使用每个项目的 key 的索引，但这通常是不好的做法，如果每个项目都有一个可以用作 key 的唯一 ID，那就更好了。您可以使用key渲染一个元素n次，并使用[...Array(n)].map()提供的索引传递给onClick：如何使用 JSX 和 Lodash 重复一个元素 n 次那么 map() 可以重写为 <div className="board-row"> <Square value={squares[0]} onSquareClick={() => handleSquareClick(0)} /> <Square value={squares[1]} onSquareClick={() => handleSquareClick(1)} /> <Square value={squares[2]} onSquareClick={() => handleSquareClick(2)} /> </div> 关于 3 行，不需要让 DOM 变得更复杂，我会使用 Flexbox 将其包装在 3 个元素之后：如何指定一个元素并在其后包裹在CSS Flexbox中？小型 React 演示来展示这一点： <div className="board-row"> { [...Array(n)].map((e, i) => ( <Square value={squares[i]} onSquareClick={() => handleSquareClick(i)} /> )) } </div> function Square({ value, onSquareClick }) { return ( <button className="square" onClick={onSquareClick}> {value} </button> ); } const Example = () => { const [squares, setSquares] = React.useState(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' ]); const handleSquareClick = (n) => console.info('Pressed button', n); return ( <div> <h1>{'Example'}</h1> <div className="board"> { [...Array(9)].map((e, i) => ( <Square value={squares[i]} onSquareClick={() => handleSquareClick(i)} /> )) } </div> </div> ) } ReactDOM.render(<Example />, document.getElementById("react")); .board { width: 150px; display: flex; flex-wrap: wrap; } .board > .square { flex-basis: 33%; }

reactjs typescript jsx

回答 2 投票 0

我正在尝试使用Reactjs useEffect和useState中的变量“Csize”来增加购物车大小

const [购物车，setCart] = useState([]); const [Csize, setSize] = useState(0); 使用效果（（）=> { setSize(购物车.长度); console.log("更新后的大小", Csize); // 记录更新后的大小

reactjs jsx cart

回答 1 投票 0

我想获得评级并在控制台时解构它。评级我得到数组（1）但我得到（找到：带有键{star，，...}的对象

错误对象作为 React 子对象无效（发现：带有键的对象 {星级、评论、评论日期、名称、用户 ID}）。如果你想渲染一个子集合，请改用数组。和我的康索...

reactjs jsx

回答 1 投票 0

JSX css 到内联样式

我正在使用 React，我需要能够获取 css 对象文字并将其转换为字符串。 React 会自动为添加到样式标签的样式对象执行此操作。

javascript css reactjs jsx

回答 3 投票 0

未捕获的类型错误：无法在反应前端中读取未定义的属性（读取“名称”）

我试图从后端获取对象数组中访问对象的属性，一旦我尝试访问该属性，它就会将对象本身记录为未定义......

javascript reactjs jsx

回答 1 投票 0

保持页面居中，两侧的 div 不均匀

这就是我想要的：这是我得到的： DIV1 位于页面中央这是我使用顺风的代码：这就是我想要的：这是我得到的： DIV1 位于页面中央这是我使用顺风的代码： <div className="flex flex-col items-center justify-center mt-10"> <div className="flex items-center justify-center w-128 my-4"> <DIV1 /> </div> <div className="flex"> <div className="p-8 max-w-xs"> <DIV2 /> </div> <div className="p-8 w-[500px]"> <DIV3 /> </div> <div className="p-8"> <DIV4 /> </div> </div> </div> 顺风的问题是我只能以大于 1 的增量调整宽度，所以我无法将其调整到精确的中心位置。即便如此，我仍在寻找一种更好的方法来做到这一点，而无需手动调整精确的像素宽度，以便它可以在任何屏幕尺寸上工作。当您想让元素在两个轴上遵循相同的网格时，您需要使用 CSS Grid 而不是 Flex。这是一个基于您的绘图的基本示例： <div class="grid grid-cols-[minmax(auto,20rem)_500px_1fr]"> <div class="col-start-2 bg-red-100">1</div> <div class="row-start-2 bg-violet-100">2</div> <div class="row-start-2 bg-blue-100">3</div> <div class="row-start-2 bg-cyan-100">4</div> </div> 虽然这是 Tailwind 特定的语法，但它很容易转换为 CSS： .container { display: grid; grid-template-columns: minmax(auto, 20rem) 500px 1fr; } 互动游乐场

html css reactjs tailwind-css jsx

回答 1 投票 0

如何设置作为参数传入的元素的 className？

我正在创建一个侧边栏组件。侧边栏组件有侧边栏段组件，称为 sidebaricons。侧边栏组件接受 3 个参数：图标、文本和类型（位置...

javascript reactjs tailwind-css jsx

回答 1 投票 0

Web浏览器在开发过程中如何运行“.jsx”文件？

我是反应“.jsx”文件的新手，我现在可以运行开发和构建测试。我有一个关于浏览器如何运行“.js”文件的问题。如果项目已构建，则浏览器正在运行&...

javascript reactjs npm jsx vite

回答 1 投票 0

Next.js 函数运行两次

我的 addToCart 函数在单击时运行两次。 //功能 const addToCart = useCallback(() => { 如果（产品&&购物车项目）{ setCartItems((上一个：LocalStorageItem[]) => { ...