javascript - 如何避免危险的SetInnerHTML？

Question

我写了一个 React 组件来渲染评级并用星星可视化它。但是我不得不为此使用 dangerouslySetInnerHTML。我怎样才能用更好的代码风格重写组件而不用 dangerouslySetInnerHTML？感谢您的帮助。

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() }} />
    );
  }
}

Answer 1

您可以使用数组而不是字符串来呈现多个元素:

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' : ''}`}/>)