我正在建立這個網站，現在我有 4 個 div，它們基本上做同樣的事情，但是它們被復制和粘貼了 4 次，就像 4 位資訊正在從它們中改變一樣。有沒有什么方法可以使用我可以做到的反應，所以它只有一個 div 和一個函式處理 div 所需的不同引數？這是一個簡單的例子。
quickExample.jsx
import React, {useRef} from "react";
function test(props) {
animalAmount = useRef(20);
return (
<div>
<div id='turtle-id'>
<h1>I like turtles!</h1>
<p>there are {animalAmount.current} turtles in my house!</p>
<button>Click me!</button>
</div>
<div id='dog-id'>
<h1>I like dogs!</h1>
<p>there are {animalAmount.current} dogs in my house!</p>
<button>Click me!</button>
</div>
<div id='fish-id'>
<h1>I like fish!</h1>
<p>there are {animalAmount.current} fish in my house!</p>
<button>Click me!</button>
</div>
<div id='hippo-id'>
<h1>I like hippos!</h1>
<p>there are {animalAmount.current} hippos in my house!</p>
<button>Click me!</button>
</div>
</div>
);
}
export default test;
由于特定原因，我不能只創建一個父組件并在那里呼叫它并復制它四次，如果可能的話，它需要在這個組件中完成。
uj5u.com熱心網友回復：
使用您的資料創建一個陣列，然后用于map列印 div：
const data = [
{
id: 'turtle-id',
title: 'I like turtles',
text: '...',
// rest of needed data
}, {
// ...
}
];
return (
data.map(item => {
return (
<div key={item.id} id={item.id}>
<h1>{item.title}</h1>
<p>{item.text}</p>
<button>Click me!</button>
</div>
);
});
);
uj5u.com熱心網友回復：
您可以在組件之外創建物件陣列并回圈訪問它們。像這樣的東西。
const animals = [{
id: "turtle-id",
title: "I like turtles!",
defineText: (value) => `there are ${value} turtles in my house!`
}, ....]
然后在你的組件的回報中，你可以做這樣的事情。
...
return (
<div>
{animals.map((animal) => {
return (
<div key={animal.id} id={animal.id}>
<h1>{animal.title}</h1>
<p>{animal.defineText(animalAmount.current)}</p>
<button>Click me!</button>
</div>
);
})}
</div>
);
...
uj5u.com熱心網友回復：
有一組描述動物的資料并用它來設定你的狀態。
將您的動物容器轉移到一個新組件中 (
Animal)。map在動物狀態上創建一系列動物。單擊按鈕時，更新該動物的計數值。
const { useState } = React;
// Pass in some data
function Animals({ data }) {
// Initialise state with the data
const [ animals, setAnimals ] = useState(data);
// Copy the state, find the name of the
// animal we're updating the count for from
// the container's dataset, find the index of the
// animal object in state, update its count value
// and the update the state
function handleCount(e) {
const copy = [...animals];
const { name } = e.target.closest('.animal').dataset;
const index = copy.findIndex(obj => obj.name === name);
copy[index].count;
setAnimals(copy);
}
// `map` over the animals state
// an return an array of Animal components
return animals.map(animal => {
return (
<Animal
animal={animal}
handleCount={handleCount}
/>
);
});
}
// Animal component
function Animal({ animal, handleCount }) {
return (
<div className="animal" data-name={animal.name}>
<h1>I like {animal.plural}!</h1>
<p>There are {animal.count} {animal.plural} in my house!</p>
<button onClick={handleCount}>Click me!</button>
</div>
);
}
const data = [
{ name: 'turtle', plural: 'turtles', count: 0 },
{ name: 'dog', plural: 'dogs', count: 0 },
{ name: 'fish', plural: 'fish', count: 0 },
{ name: 'hippo', plural: 'hippos', count: 0 }
];
ReactDOM.render(
<Animals data={data} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/486471.html
標籤：javascript 数组 反应 功能