[英]How to avoid dangerouslySetInnerHTML?
我編寫了一個React組件,該組件呈現評級並用星標對其進行可視化。 但是我必須為此使用危險的SetInnerHTML。 我該如何重寫具有更好代碼風格的組件,而又不必危險地設置SetInnerHTML? 感謝您的任何幫助。
export default class BookRating extends React.Component {
renderStars = () => {
let result = '';
for(let i=1; i<=5; i++) {
this.props.rating >= i
? result += '<div class="fa fa-star checked"></div>'
: result += '<div class="fa fa-star"></div>'
}
return result;
}
render () {
return (
<div className="rating" dangerouslySetInnerHTML={{ __html: this.renderStars() }} />
);
}
}
您可以使用數組而不是字符串來呈現多個元素:
export default class BookRating extends React.Component {
renderStars = () => {
let result = [];
for(let i=1; i<=5; i++) {
this.props.rating >= i
? result.push(<div key={i} class="fa fa-star checked"></div>)
: result.push(<div key={i} class="fa fa-star"></div>'
}
return result;
}
render () {
return (
<div className="rating">{this.renderStars()}</div>
);
}
}
正如Quentin和Emile所指出的,您可以在一行中編寫此函數,如下所示:
renderStars = () => Array(5).fill(0).map(_, i => <div className={`fa fa-star${this.props.rating > i ? ' checked' : ''}`}/>)
我做了類似的事情,也支持半星,並在其余位置顯示“空”星(例如3.5顆星將顯示3個全星,1個半星和1個空星):
const Rating = ({ rating }) => {
rating = Math.round(rating * 2) / 2
const fullStars = Math.floor(rating)
const halfStars = rating - fullStars > 0.2 ? 1 : 0
const emptyStars = 5 - fullStars - halfStars
return (
<div css={{ whiteSpace: "nowrap", ".fa": { color: "yellow" } }}>
{[...Array(fullStars)].map((_, index) => (
<span key={`f-${index}`} className="fa fa-star" />
))}
{[...Array(halfStars)].map((_, index) => (
<span key={`h-${index}`} className="fa fa-star-half-o" />
))}
{[...Array(emptyStars)].map((_, index) => (
<span key={`o-${index}`} className="fa fa-star-o" />
))}
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.