Могу ли я сделать Array.join () с тегом HTML в React, используя JSX? - PullRequest
Новая
       3

Могу ли я сделать Array.join () с тегом HTML в React, используя JSX?

1 голос
/ 14 мая 2019

Я хотел бы использовать метод join () для массива Javascript, но я хотел бы объединить () с тегом HTML.

Я хочу сделать что-то вроде: 

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.

Ответы [ 2 ]

1 голос
/ 14 мая 2019

Я должен добавить это, поскольку 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/> s: 

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>
  }
}
1 голос
/ 14 мая 2019

Ваш код в порядке. Предполагая, что здесь не работает фреймворк, единственное, на что я хотел бы указать, - вам нужно использовать innerHTML function 

var mArray =[ 'line 1', 'line 2'];

document.body.innerHTML = mArray.map((val,idx) => { return `sometext: <strong>${val}</strong>`; }).join('<br/>')

Обновление:

, так как вы используете реакцию, вам нужно использовать dangerouslySetInnerHTML

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

Но поскольку вы используете JSX, вам не нужно использовать строки и опасно SetInnerHTML. Вы также можете просто использовать JSX, чтобы составить свой дом: 

class Page extends React.Component {
    render() {
        const {the_form} = this.props;
        const dom = the_form['candidate_ids'].map((val,idx) => {
           return (
             <>
               {this.getCandidateName(val)}
               {idx+1 < the_form['candidate_ids'].length ? </br> : null}
             </>
           );
        }))
        return (<p>{dom}</p>);
    }
}

документы: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

...