我正在嘗試提取包含商標的字串值的一部分反應并應用類名或行內樣式，以便我可以更改樣式，但我從這段代碼中得到的結果是 [object object]
const dataTm = <span style={{ border: '2px black solid' }}>?</span>
const changeFormat = (item) => {
const replaceTm = item?.name.replace('?', `${dataTm}`)
return ReactHtmlParser(replaceTm)
}
const menu = () =>{
return(
<Link>
{item?.name.includes('?') ? changeFormat(item) : item?.name}
<Link>
)}
uj5u.com熱心網友回復：
String#replace回傳一個字串- 它也將傳入的所有內容轉換為字串。如果您嘗試轉換一個物件（這就是JSX物件），您將得到[Object object]回報。
您必須稍微修改您的代碼，最重要的區別是將dataTm變數更改為字串，以便函式可以正確理解String#replace。
const item = {
name: 'abc?abc',
};
export default function App() {
const dataTm = "<span style='font-size:32px;color:red'>?</span>";
const changeFormat = (item) => {
const replaceTm = item?.name.replace('?', dataTm);
return ReactHtmlParser(replaceTm);
};
return (
<div>{item?.name.includes('?') ? changeFormat(item) : item?.name}</div>
);
}
https://codesandbox.io/s/bitter-frost-5fk6je?file=/src/App.js
上面的代碼和代碼框中的代碼只是一個最小的例子。在您的代碼示例中，您應該只dataTm用引號括起來并稍微調整樣式，它應該可以正常作業。
uj5u.com熱心網友回復：
可能必須使用[dangerouslySetInnerHTML][1]
{item?.name.includes('?') ? <div dangerouslySetInnerHTML={{ __html: changeFormat(item }} /> ) : item?.name}
顧名思義，如果絕對必要，請使用它
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533330.html
上一篇：鏈接按鈕導致重定向問題
下一篇：如何用情感設計MUI5工具提示？