英文:
How to render JSX component inside specific html div in react?
问题
在点击特定的 <div> 后，要在该 <div> 内渲染 <Details> JSX 组件，你可以使用以下方法：
- 在组件内部维护一个状态，用于跟踪点击的
<div>的索引或唯一标识。 - 在点击时更新这个状态，以便知道应该在哪个
<div>中渲染<Details>组件。 - 在渲染循环中，根据当前被点击的
<div>的索引或唯一标识来确定是否渲染<Details>组件。
这是一个示例代码：
import React, { useState, useEffect } from 'react';
import getResults from '../api/getResults';
function Results(props) {
const [results, setResults] = useState([]);
const [selectedDiv, setSelectedDiv] = useState(null);
useEffect(() => {
setResults(getResults(props.season));
}, [props.season]);
const handleDivClick = (index) => {
setSelectedDiv(index);
};
return (
<>
{results.map((elem, index) => (
<div key={index} onClick={() => handleDivClick(index)}>
{elem}
{selectedDiv === index && <Details />}
</div>
)}
</>
);
}
export default Results;
在这个示例中，我们使用 selectedDiv 状态来跟踪点击的 <div> 的索引。当某个 <div> 被点击时，handleDivClick 函数会更新 selectedDiv 的值，然后根据 selectedDiv 的值来决定是否在点击的 <div> 中渲染 <Details> 组件。如果 selectedDiv 等于当前循环中的索引，就渲染 <Details> 组件。
英文:
If I have multiple divs whose are rendered from data array using array.map() method like that:
import React,{ ReactDOM } from 'react'
import { useState,useEffect,useRef } from 'react'
import getResults from '../api/getResults'
...
function Results (props){
const [results,setResults]=useState([])
useEffect(()=>{
setResults(getResults(props.season))},
[props.season])
return (
{results.map((elem,index)=>{
return (
<div key={index} onClick={()=/*what should I do to render inside this div?*/>}>{elem}</div>
)
})}
<Details/> //I want to render this jsx inside the clicked div
)
........
}
How to get reference of specific clicked div to render Details jsx component inside this div? I tried use useRef hook but it always return the last div.
答案1
得分: 1
跟踪点击的元素在状态中。例如，考虑以下状态值：
const [clickedElement, setClickedElement] = useState();
默认情况下，该值为undefined。当点击元素之一时，您可以更新该值为某个标识符：
<div key={index} onClick={() => setClickedElement(index)}>{elem}</div>
现在，每次点击都会更新状态，指示点击了哪个元素。
然后，您可以使用该状态值来确定要渲染什么。例如：
<div key={index} onClick={() => setClickedElement(index)}>
{elem}
{clickedElement === index ? <Details/> : null}
</div>
基本上，无论您如何处理它，结构几乎总是相同：
- 在状态中跟踪信息。
- 事件（例如点击事件）更新状态。
- 基于状态渲染用户界面。
英文:
Track the clicked element in state. For example, consider this state value:
const [clickedElement, setClickedElement] = useState();
By default the value is undefined. You can update the value to some identifier when clicking one of the elements:
<div key={index} onClick={() => setClickedElement(index)}>{elem}</div>
Now each click updates state indicating which element was clicked.
Then you can use that state value to determine what to render. For example:
<div key={index} onClick={() => setClickedElement(index)}>
{elem}
{clickedElement === index ? <Details/> : null}
</div>
Basically any way you approach it, the structure is pretty much always the same:
- Track information in state.
- Events (e.g. a click event) update state.
- UI is rendered based on state.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论