我可以使用 JSX 在 React 中使用 HTML 标签执行 Array.join() 吗？

Question

我想在 Javascript 数组上使用 join() 方法，但我想使用 HTML 标签来 join() 。

我想做类似的事情：

class Page extends React.Component {
    render() {
        <p>
           {this.props.the_form['candidate_ids'].map((val,idx) => {
               return this.getCandidateName(val);
           }).join('<br/>')}
        </p>
    }
}

它转义了标签并且不渲染新行。

我正在使用 React、Webpack 和 Babel。

Answer 1

我必须添加这一点，因为dangerouslySetInnerHTML加入长字符串并不是真正的反应方式，而且有点误导。另外，您缺少key映射项目上的

//import Fragment
import { Fragment, Component } from "react"

class Page extends Component {
  const ids = this.props.the_form['candidate_ids'];
  render() {
    <p>
      {ids.map((val, idx) => {
        const name = this.getCandidateName(val);
        return (
          <Fragment key={`${name}${idx}`}>
            {name}
            {idx < ids.length - 1 && <br />}
          </Fragment>
        );
      })}
    </p>
  }
}

（更新以删除尾随<br/>）。

这是一个可能的替代版本，没有<br/>：

class Page extends Component {
  const ids = this.props.the_form['candidate_ids'];
  render() {
    <p>
      {ids.map((val, idx) => {
        const name = this.getCandidateName(val);
        return (
          <span key={`${name}${idx}`} style={{display: 'block'}}>
            {name}
          </span>
        );
      })}
    </p>
  }
}