const ModalButton = ({ label, mode }) => {
return (
<button type="submit">
{mode == "new" && (
<FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />) label
}
</button>
);
};
這個標簽在我的代碼編輯器中帶有紅色下劃線。為什么它不允許我使用帶有 JSX 的 JavaScript？
uj5u.com熱心網友回復：
的第二個運算元&&必須是單個值；現在，你正試圖給它兩個。要將圖示和其后的文本節點視為一個單元（單個值），您需要將它們包裝在某些東西中，例如片段：<>_____</>
const ModalButton = ({ label, mode }) => {
return (
<button type="submit">
{mode == "new" && (
<>
<FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />
{label}
</>
)}
</button>
);
};
（你也有)錯誤的地方；我已經在上面修復了它。它不應該在圖示之后，它應該在整個運算元之后&&[所以有了這個改變，它在片段的結尾之后]。 )
此外，如果要使用 的值label，則需要將其包裝在 JSX 運算式中（如上）{label}：
uj5u.com熱心網友回復：
正如@Konrad Linkowski正確評論的那樣
這是無效的語法
它有什么問題？
您正在使用的內容稱為運算式。因此，如果condition1為假或將回傳condition2 ，則condition1 && condition2將回傳。false
在你的表達中，它的condition1 && condition2 condition3. 在條件 2和條件3 之間需要有一個運算子，或者它們需要正確的結構。
如果您想label始終為按鈕呈現和圖示"new"，它應該是：
{condition1 && condition2}
{condition3}
但是如果您需要它們一起渲染或不渲染，則需要包裝 then 以便您的運算式回傳 1 個值：
{
condition1 &&
(<>
element1
element2
</>)
}
樣本
顯示代碼片段
const ModalButton1 = ({ label, mode }) => {
return (
<button type="submit">
{
mode == "new" && (
<FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />)
}
{ label }
</button>
);
};
const ModalButton2 = ({ label, mode }) => {
return (
<button type="submit">
{
mode == "new" && (
<>
<FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />)
{label}
</>
}
</button>
);
};uj5u.com熱心網友回復：
JSX 運算式只能回傳一個值。如果要回傳多個值，請將它們包裝在一個陣列中，如下所示：
{mode == "new" && [<Component/>, label]}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/504746.html
標籤：javascript 反应