ReactJS создает дополнительные промежутки в HTML

Я начал работать над проектом и унаследовал большое количество ReactJS, которое я пытаюсь разобраться и лучше понять. В настоящее время существует небольшая проблема, которую я пытаюсь исправить в приложении, над которым я работаю.ReactJS создает дополнительные промежутки в HTML

Вот код для визуализации:

render: function() { 
return (
    <div className="finish-content-container"> 
    <div className='finish-instructions'> 
     <span> 
     {this.props.finishInfo.startpage.instructions || ""} 
     </span> 
    </div> 
    { 
    this.props.userData.score && !this.props.finishInfo.finishpage.hideScore ? 
    <div className="finish-results"> 
     <span>{"Your Score: " + (this.props.userData.score || "")}</span> 
    </div> : "" 
    } 
    { 
    this.props.finishInfo.finishpage && this.props.finishInfo.finishpage.graph ? 
     <div className="finish-graph"> 
     <div dangerouslySetInnerHTML={{__html: processStoredGraph(this.props.finishInfo.finishpage.graph, 250, 450)}}></div> 
     </div> : "" 
    } 
    { 
    this.props.userData.score && this.props.finishInfo.finishpage && this.props.finishInfo.finishpage.feedback ? 
    <div className='finish-results-feedback'> 
     {this._getConditionalText(this.props.finishInfo.finishpage.feedback, this.props.userData.score)} 
    </div> : "" 
    } 
    <div className="finish-content" dangerouslySetInnerHTML={{__html: this.props.finishInfo.startpage.content}}></div> 
    <div className="finish-button"> 
     <span onClick={this.props.onClick} className="btn finish">REPLAY</span> 
    </div> 
    </div> 
); 
},

Вот что происходит: вся логика, кажется, работает хорошо, но это создает добавление охватывает в HTML и эти пролеты занимают недвижимость на страницы, даже если у них нет данных.

Любые мысли? Я могу включить вывод HTML на странице, если это вообще полезно.

источник

2016-01-20 breadstickguy

В этом реактиве есть некоторые странные вещи; 'dangerouslySetInnerHTML' кажется, что данные не обрабатываются способом React, и вы генерируете много внутри оператора return вместо того, чтобы готовить контент, а затем просто выполняете' return

{content}

; ', причем контент представляет собой массив элементов, которые необходимо отобразить на визуализированном представлении. –

Согласен. Я унаследовал этот код, и я пытаюсь его лучше понять. Я согласен, что это не реакция. У вас есть предложения о том, как я могу начать перестраивать этот код, чтобы сделать его более пригодным для использования? – breadstickguy

Я бы начал с первого объединения содержимого, которое вам нравится 'function render() {content = []; content.push (this.formThing (this.props ....)); ...; return

{content}

; } 'где' formThing' возвращает 'null', если вход неопределен или реальный фрагмент JSX, если имеется значимый ввод. Это позволяет вам понять, что получается в каждом бите. –

Чтобы ответить на ваш вопрос: Реагировать вставки охватывает в DOM по различным причинам, в том числе, чтобы обернуть плавающей текстовые узлы (см this answer), белое пространство (см this answer), и (я думаю), чтобы установить заполнители для компонентов, которые возвращают null от метода render, между прочим. Если это вызывает проблемы для вас, вероятно, это потому, что вы используете CSS, который работает со всеми span элементами или всеми span элементами в рамках вашего компонента. Погрузите CSS или сделайте его конкретным для элементов, которые ему нужны для стиля, и вы должны быть в порядке.

На мой взгляд, подход React здесь соответствует намерению элемента span, который должен быть макетом no-op, если не связан с определенным классом.

источник

2016-01-20 22:05:07 nrabinowitz

ReactJS создает дополнительные промежутки в HTML

ответ

Смежные вопросы