我創建了一個自定義組件來簡單地在 IonCardContent 中布局內容。到目前為止，這非常適合我的需求：
interface ContainerProps {
position?: string;
content?: string,
colour?: string;
custClass?: string;
}
const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a", colour = "", custClass = "" }) => {
if ( position.trim().toLowerCase() === "right" ) {
return <><div className={"ion-float-right " custClass} >{content}</div><div className="clear-right"></div></>
} else if ( position.trim().toLowerCase() === "left" ) {
return <div className={"ion-float-left " custClass}>{content}</div>
} else if ( position.trim().toLowerCase() === "full" ) {
return <div className={"" custClass}>{content}</div>
} else if ( position.trim().toLowerCase() === "empty" ) {
return <div className={"" custClass}> </div>
} else {
return null
}
};
export default CardContainer;
但是，我現在想開始將一些 html 元素傳遞給組件，這樣我就可以通過將其加粗或將部分字串包裝在一個跨度中并向其中添加一個 css 類來執行諸如突出顯示文本部分之類的操作。
目前，將 html 添加到 content 屬性只會導致將其顯示為文字字串。這顯然是由于“內容”被宣告為字串。
顯示 html 的解決方案是簡單地更改介面中的型別宣告嗎？如果是這樣，該怎么辦？還是需要更復雜的解決方案？
謝謝。
uj5u.com熱心網友回復：
從評論中的重復答案：
import sanitizeHtml from 'sanitize-html';
const MyComponent = () => {
dirty = '<a href="my-slug" target="_blank" onClick="evil()">click</a>';
const clean = sanitizeHtml(dirty, {
allowedTags: ['b', 'i', 'em', 'strong', 'a'],
allowedAttributes: {
a: ['href', 'target']
}
});
return (
<div
dangerouslySetInnerHTML={{__html: clean}}
/>
);
};
所以
import sanitizeHtml from 'sanitize-html';
interface ContainerProps {
position?: string;
content?: string,
colour?: string;
custClass?: string;
}
const CardContainer: React.FC<ContainerProps> = ({ position = "right",
content = "n/a", colour = "", custClass = "" }) => {
const myHTML = null;
if ( position.trim().toLowerCase() === "right" ) {
myHTML = '<div className={"ion-float-right " custClass} >{content}</div><div className="clear-right"></div>'
} else if ( position.trim().toLowerCase() === "left" ) {
myHTML = '<div className={"ion-float-left " custClass}>{content}</div>'
} else if ( position.trim().toLowerCase() === "full" ) {
myHTML = '<div className={"" custClass}>{content}</div>'
} else if ( position.trim().toLowerCase() === "empty" ) {
myHTML = '<div className={"" custClass}> </div>'
}
const clean = sanitizeHtml(myHTML, {
allowedTags: ['b', 'i', 'em', 'strong', 'a'],
allowedAttributes: {
a: ['href', 'target']
}
});
return (
<div
dangerouslySetInnerHTML={{__html: clean}}
/>
);
};
export default CardContainer;
您當然需要調整 allowedTags 和 allowedAttribute 值以滿足您的需要
uj5u.com熱心網友回復：
將我所有的 html 輸出以及通過變數傳入的動態內容傳遞到 santizer 中意味著變數要么被剝離，要么它們的呼叫顯示為文字標記。
因此，有必要對包含傳遞給組件的 html 內容的變數進行清理。
import React from 'react';
import './CardContainer.css';
import sanitizeHtml from 'sanitize-html';
interface ContainerProps {
position?: string;
content?: string,
colour?: string;
custClass?: string;
}
const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a", colour = "", custClass = "" }) => {
const clean = sanitizeHtml(content, {
allowedTags: ['b', 'i', 'em', 'strong', 'a', 'div', 'span'],
allowedAttributes: {
a: ['href', 'target'],
div: ['class', 'className'],
span: ['style', 'class', 'className']
}
});
if ( position.trim().toLowerCase() === "right" ) {
return <><div className={"ion-float-right " custClass} dangerouslySetInnerHTML={{__html: clean}}/><div className="clear-right"></div></>
} else if ( position.trim().toLowerCase() === "left" ) {
return <div className={"ion-float-left " custClass} dangerouslySetInnerHTML={{__html: clean}}/>
} else if ( position.trim().toLowerCase() === "full" ) {
return <div className={"" custClass} dangerouslySetInnerHTML={{__html: clean}}/>
} else if ( position.trim().toLowerCase() === "empty" ) {
return <div className={"" custClass}> </div>
} else {
return null
}
};
export default CardContainer;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361690.html