我是 React 的新手，我目前正在做一個專案，我正在使用 React 構建一個單頁應用程式。該專案的目標是制作一個將舉辦釀酒廠/葡萄酒供應商之旅的區域地圖，并且地圖上有按鈕，用戶可以單擊/點擊以顯示有關每個供應商/葡萄園的資訊。
我目前正試圖讓模式顯示用戶單擊的指定供應商/葡萄園按鈕的資訊，即用戶單擊供應商 1 的按鈕，然后模式彈出并顯示供應商 1 的相關資訊。供應商 2 相同，依此類推。目前，除了關閉模式的按鈕外，模式不顯示任何內容。我的問題是如何獲取每個供應商/葡萄園的資訊，以便在點擊時顯示相應按鈕？
我嘗試在 Vendor.js 的回傳中包含 .map 方法，但這會顯示模式中每個供應商/葡萄園的所有資訊。
我當前的檔案結構是：
App
|_src
|_components
|_Button
|_Popup
|_Vendor
供應商.js：
import React from './react';
const Vendor = () => {
let vendors = [
{
id: 1,
title: 'Vendor 1 Name',
},
{
id: 2,
title: 'Vendor 2 Name'
}
]
const [vendorsList, setVendorsList] = useState([]);
useEffect(() => {
setVendorsList([...vendors]);
}, []);
return (
<div className='card' key={vendors.id}>
<h3>{vendors.title}</h3>
<h3>{vendors.hours}</h3>
</div>
)
}
export default Vendor;
應用程式.js：
function App() {
return(
<div className='App'>
<Map />
<Info />
</div>
<div className='app__button'>
<Button />
</div>
);
}
按鈕.js：
const Button = () => {
const [buttonPopup, setButtonPopup] = useState(false);
return(
<div className='popup'>
<button onClick={() => setButtonPopup(true)}>Button</button>
<Popup
trigger={buttonPopup}
setTrigger={setButtonPopup}
/>
</div>
)
}
Popup.js：
const Popup = (props) => {
return (props.trigger) ? (
<div className='popup-inner'>
<button className='close-button' onClick={() => props.setTrigger(false)}>X</button>
{props.children}
<Vendor />
</div>
) : "";
};
如果還有什么我可以提供的幫助，我會很樂意。蒂亞！
uj5u.com熱心網友回復：
因此，您有一個具有關聯 ID 的供應商串列，將資料放入模式的最佳方法是將供應商 ID 傳遞給彈出視窗，然后從串列中獲取具有匹配 ID 的供應商。
您可以通過使當前位于 Vendor 組件中的供應商串列位于組件外部并被匯出，以便在任何地方使用它來做到這一點。然后，供應商組件接受一個 id 并通過執行以下操作獲取具有該 id 的供應商：
const vendor = Vendors.find(vendor => vendor.Id === Id);
然后在你的 Vendor 組件中渲染 ... vendor.title ... ... vendor.hours ...。
我希望這會有所幫助，我把它寫在我的手機上，所以如果你有任何問題，請lmk！
uj5u.com熱心網友回復：
當前的問題是，在 Vendors 組件中，組件的 render 方法給定了一組供應商，并嘗試從該陣列而不是單個物件上獲取資料。<h3>{vendors.title}</h3>不會回傳標題，因為 vendor 是一個陣列，而不是具有title.
這就是為什么沒有渲染。但是，問題是您不能只在供應商組件中迭代該串列，因為現在該組件不知道要顯示哪個供應商。父組件應該將供應商物件傳入此子組件。這是一個例子！
如果每個 Button 為特定供應商打開一個模式，則 VendorList 可以在組件結構中處于較高位置以傳遞必要的資訊，如下所示：
function App() {
let vendors = [
{
id: 1,
title: 'Vendor 1 Name',
},
{
id: 2,
title: 'Vendor 2 Name'
}
]
return(
<div className='App'>
<Map />
<Info />
</div>
{/* create 1 button per vendor */}
{vendors.map(vendor => (
<div className='app__button'>
<Button vendor={vendor} />
</div>
))}
);
}
// button now receives a single vendor on the props obj
const Button = (props) => {
const [buttonPopup, setButtonPopup] = useState(false);
return(
<div className='popup'>
<button onClick={() => setButtonPopup(true)}>Button</button>
<Popup
trigger={buttonPopup}
setTrigger={setButtonPopup}
vendor={props.vendor}
/>
</div>
)
}
// keep passing the vendor in the props...
const Popup = (props) => {
return (props.trigger) ? (
<div className='popup-inner'>
<button className='close-button' onClick={() =>
props.setTrigger(false)}>X</button>
{props.children}
<Vendor vendor={props.vendor}/>
</div>
) : "";
};
// until finally the Vendor component receives the individual vendor it should display
const Vendor = (props) => {
return (
<div className='card' key={props.vendor.id}>
<h3>{props.vendor.title}</h3>
<h3>{props.vendor.hours}</h3>
</div>
)
}
這么多的 prop 傳遞并不總是理想的，但它是學習如何跨 React 組件移動資料的好方法！希望這可以幫助！
uj5u.com熱心網友回復：
看起來你在 Vendor.js 檔案中犯了一個錯誤，你有一個供應商陣列，但你顯示它就像它是一個物件一樣。你必須像這樣在它上面制作一張地圖：
Vendor.js 結束：
return (
<>
{vendors.map((vendor) => (
<div className="card" key={vendor.id}>
<h3>{vendor.title}</h3>
<h3>{vendor.hours}</h3>
</div>
))}
</>
)
但是，如果您想按供應商獲取一個按鈕并在彈出視窗中顯示該供應商的資訊，您應該這樣做：
供應商.js：
import React from './react';
const Vendor = ({vendor}) => {
return (
<div className='card' key={vendor.id}>
<h3>{vendor.title}</h3>
<h3>{vendor.hours}</h3>
</div>
)
}
export default Vendor;
應用程式.js：
function App() {
let vendors = [
{
id: 1,
title: 'Vendor 1 Name',
},
{
id: 2,
title: 'Vendor 2 Name'
}
]
const [vendorsList, setVendorsList] = useState([]);
useEffect(() => {
setVendorsList([...vendors]);
}, []);
return(
<div className='App'>
<Map />
<Info />
</div>
<div className='app__button'>
{vendors.map((vendor) => (<Button vendor={ vendor } />)}
</div>
);
}
按鈕.js：
const Button = ({vendor}) => {
const [buttonPopup, setButtonPopup] = useState(false);
return(
<div className='popup'>
<button onClick={() => setButtonPopup(true)}>Button</button>
<Popup
trigger={buttonPopup}
setTrigger={setButtonPopup}
vendor={ vendor }
/>
</div>
)
}
Popup.js：
const Popup = (props) => {
return (props.trigger) ? (
<div className='popup-inner'>
<button className='close-button' onClick={() => props.setTrigger(false)}>X</button>
{props.children}
<Vendor vendor={ props.vendor }/>
</div>
) : "";
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426574.html
標籤：javascript 反应
上一篇：React-如何使用鉤子useState道具創建地圖功能
下一篇：如何僅替換影像源的一部分？