@ChrisJonson

Как вывести массив строк в компоненте React после условия?

Компонент выводит статьи из json файла. Некоторые статьи хранятся обычной строкой, а некоторые в виде массива строк (чтобы разделить на параграфы). В рендере вызывается функция в которой условие проверяет, обычная строка там или массив, и в зависимости от этого по разному выводит.

Если статья обычной строкой, то выводится нормально. А если в виде массива строк, то не хочет рендерить, хоть и ошибки не выскакивают и в консоль логе каждую строку выводит нормально. Почему так? Как отрендерить массив после условия?

var ArticleContent = React.createClass({
	renderContent: function(){
		if (typeof this.props.content == 'string'){
      // 1. цельная строка без абзацев спокойно рендерится  
			return <p>{this.props.content}</p> 
		} else {
			<div>
				{
			       this.props.content.map(function(item, i){
             // 2. массив строк: каждая строка выводится в консоль, но не рендерится
				     console.log(item);
			       return <p key={i}>{item}</p>
				 })
				}
				 
			 </div>
		}
	},
	render: function(){
		return (
			<div>
				{this.renderContent()}
			</div>
		)
	}
});
  • Вопрос задан
  • 2047 просмотров
Пригласить эксперта
Ответы на вопрос 2
@r_zaycev
Array.map возвращает массив
Ответ написан
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
блок после else ничего не возвращает, надо так:
var ArticleContent = React.createClass({
  renderContent: function(){
    if (typeof this.props.content == 'string'){
      // 1. цельная строка без абзацев спокойно рендерится  
      return <p>{this.props.content}</p> 
    } else {
      return (
        <div>
        {
             this.props.content.map(function(item, i){
                // 2. массив строк: каждая строка выводится в консоль, но не рендерится
                console.log(item);
                return <p key={i}>{item}</p>
             }).join('');
        }
        </div>
      );
    }
  },
  render: function(){
    return (
      <div>
        {this.renderContent()}
      </div>
    );
  }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы