是否可以更改使用陣列創建的按鈕文本。如果可以的話，按鈕中的onClick函式應該怎么處理。這是示例代碼：
function RenderFeeds(props) {
const list = []
props.products.forEach((product) => {
list.push(
<>
<h1>{product.name}</h1>
<h2>{product.company_name}</h2>
<h2>{product.description}</h2>
<button onClick={}>{product.watchlist==false ? 'Add to watchlist':'Remove From watchlist'}</button>
</>
)
})
return (
<>
{list}
</>
)}
所以基本上我有一個包含這個值的陣列：
[{
"name": "lorem ipsum",
"description": "Nam vel nisi rutrum quam ",
"company_name": "PT dapibus ",
"company_slug": "pt-dapibus",
"watchlist": true,
"id": 1
}]
我正在使用這個陣列創建組件。該監視串列變數將影響到按鈕上的文本。如果這是真的，那么我希望按鈕具有從監視串列中洗掉，反之亦然。
我知道我們可以在 React 中使用鉤子并將useState應用于onClick按鈕功能。但是如果我使用回圈來創建組件，我不知道如何初始化狀態。
uj5u.com熱心網友回復：
在下面的代碼片段中，我實作了一個示例，只是為了簡單起見，我使用了靜態資料作為串列。我希望它能有所幫助。
const data = [{ "name": "lorem ipsum", "description": "description1", "company_name": "PT dapibus ", "company_slug": "pt-dapibus", "watchlist": true, "id": 1 },{ "name": "lorem ipsum2", "description": "description2", "company_name": "Google", "company_slug": "company_slug", "watchlist": true, "id": 2 }]
function RenderFeeds({ feeds, onAddToWatch, onRemoveFromWatch }) {
return (
<React.Fragment>{/* or any markup you want */}
{feeds.map((feed) => (
<div className="feed" key={feed.id}>
<h1>{feed.name}</h1>
<h2>{feed.company_name}</h2>
<h2>{feed.description}</h2>
<button
onClick={() =>
feed.watchlist
? onRemoveFromWatch(feed.id)
: onAddToWatch(feed.id)
}
>
{feed.watchlist ? 'Remove From watchlist' : 'Add to watchlist'}
</button>
</div>
))}
</React.Fragment>
);
}
function Feed() {
const [feeds, setFeeds] = React.useState([]);
React.useEffect(() => {
//receiving data, for example fetching data by ajax or whatever
setFeeds(data);
}, []);
const handleAddToWatch = (id) => {
// implement updating feeds, for example making an ajax request and getting new data
setFeeds((feeds) =>
feeds.map((feed) => ({
...feed,
watchlist: feed.id == id ? true : feed.watchlist,
}))
);
};
const handleRemoveFromWatch = (id) => {
// implement updating feeds, for example making an ajax request and getting new data
setFeeds(feeds =>
feeds.map((feed) => ({
...feed,
watchlist: feed.id == id ? false : feed.watchlist,
}))
);
};
return (
<RenderFeeds
feeds={feeds}
onAddToWatch={handleAddToWatch}
onRemoveFromWatch={handleRemoveFromWatch}
/>
);
}
ReactDOM.render(<Feed/>, document.getElementById('root')).feed{
border: 2px solid #ccc;
padding: 15px;
margin: 15px;
}
.feed h1{ margin: 0}<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="root"></div>uj5u.com熱心網友回復：
如果你基于 props 渲染東西，在這種情況下真的沒有必要使用鉤子。
這樣的事情應該作業：
function RenderFeeds(props) {
return (
<>
{props.products.map((product) => {
return (
<>
<h1>{product.name}</h1>
<h2>{product.company_name}</h2>
<h2>{product.description}</h2>
<button onClick={}>{product.watchlist==false ? 'Add to watchlist':'Remove From watchlist'}</button>
</>
)
})}
</>
)}
uj5u.com熱心網友回復：
無需創建一個額外的變數list并回圈遍歷您作為道具獲取的產品串列，然后將其推送到list然后渲染，list 您可以直接使用map. 并且無需檢查product.watchlist==false何時可以使用！邏輯非
function RenderFeeds(props) {
return (
<>
{props.products.map((product) => {
return (
<>
<h1>{product.name}</h1>
<h2>{product.company_name}</h2>
<h2>{product.description}</h2>
<button onClick={}>{!product.watchlist ? 'Add to watchlist':'Remove From watchlist'}</button>
</>
)
})}
</>
)}
uj5u.com熱心網友回復：
首先，我強烈建議您使用 Array.map() 方法而不是使用 Array.forEach() 來創建 List 組件的陣列，因為 Array.map() 本身回傳一個具有新映射的陣列。
您在解決此問題時正在尋找的事物或概念稱為conditional rendering.
您可以將ternary operator或 也稱為 asconditional operators用于執行目的，conditional rendering因為JSX expects an expression可以將其評估為某事。
<button onClick={()=>alert('Watchlist changed')}>{product.watchlist==true? '添加到監視串列':'從監視串列中洗掉'}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/393348.html
標籤：javascript 反应 反应原生 ecmascript-6 反应钩子
上一篇：二傳手不拋出錯誤