您好，我是打字稿的新手，我在這里有作業要做。我需要創建動態類，就像下面的代碼一樣。
import React, { ReactNode, useState } from "react";
interface Props {
text: ReactNode;
}
const ListItem = ({ text }: Props) => {
let [showMore, setShowMore] = useState(false);
return (
<div className="item">
<div>
<div className={`text ${showMore ? "active" : ""}`}>{text}</div>
</div>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
);
};
但是我需要將它實作到這段代碼中，我不知道該怎么做，因為我不理解撰寫它的人的這種語法。當我嘗試實作以前的代碼時，我在使用這種語法呈現 React 鉤子時遇到了問題。
我希望你明白我的問題
type DeliveryBranchHitProps = {
hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({
hit: delivery_branch,
}: DeliveryBranchHitProps): JSX.Element => (
<>
<div className={`branch-opening-week ${showMore ? "active" : ""}`}>
<p>
<span className="branch-day">Monday:</span>
{delivery_branch.opening_monday}
</p>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
</>
);
uj5u.com熱心網友回復：
我不太確定我理解你的問題，但可能你想做這樣的事情，你有一個通用組件，它需要一些內容chilren。
interface Props {
text: ReactNode;
children: ReactNode;
}
const ListItem = ({ text, children }: Props) => {
let [showMore, setShowMore] = useState(false);
return (
<div className="item">
<div>
<div className={`text ${showMore ? "active" : ""}`}>
{text}
{children}
</div>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
</div>
);
};
type DeliveryBranchHitProps = {
hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({ hit: delivery_branch }: DeliveryBranchHitProps): JSX.Element => (
<>
<ListItem text={delivery_branch.name} />
<p>
<span className="branch-day">Monday:</span>
{delivery_branch.opening_monday}
</p>
</ListItem>
</>
);
uj5u.com熱心網友回復：
請查看這篇文章以了解沒有大括號的const func = () => ( .. )語法箭頭函式
現在你的函式回傳一個單一的運算式——即一些 JSX。要添加一些額外的邏輯，您需要使您的函式多行（注意大括號）：
const Func = (props) => {
// your hook goes here
let [state, useState] = useState();
// return the jsx
return ( .. )
}
UPD：所以對于你的情況是：
type DeliveryBranchHitProps = {
hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({
hit: delivery_branch,
}: DeliveryBranchHitProps): JSX.Element => {
let [showMore, setShowMore] = useState(false);
return (
<>
<div className={`branch-opening-week ${showMore ? "active" : ""}`}>
<p>
<span className="branch-day">Monday:</span>
{delivery_branch.opening_monday}
</p>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387145.html
標籤：javascript html 反应 打字稿