Возврат и рендеринг div в ответе

Question

Im пытается вернуть динамически динамически из функции в реакции. Я вызываю функцию для визуализации непосредственно в функции рендеринга компонентов, но она не выводится. Я уверен, что это простая ошибка в коде, но я не могу ее заметить.

Код:

import React, { Component } from 'react' 

import ProgressBar from './ProgressBar' 

require('styles/_servicesPage/priceCalc.css') 

export default class PriceCalculator extends Component { 

    componentWillMount() { 
    this.state = { 
     arr: [] 
    } 
    } 

    minimizeDiv() { 
    this.props.toggleDiv(false) 
    } 


    returnDiv(){ 
    return 
     <div> 
     <p> 
      Printing out text! 
     </p> 
     </div> 
    } 

    render() { 
    var styleVar = { 
     backgroundImage: 'url(assets/images/services/pricecalc_blue_bg.svg)', 
     backgroundPosition: 'right center' 
    } 

    return (
     <div className="service-form" id="priceCalc" style={styleVar}> 

     <div> 
      <h1>Priskalkyl för badrum</h1> 
      <p> 
      Välkommen att fylla i formuläret, 
      så är du ett steg närmare dina drömmars badrum. 
      </p> 
     </div> 

     {this.returnDiv} 

     <div onClick={this.minimizeDiv.bind(this)} className="minimizeBorder"> 
      <img src="assets/arrows/minimizeArrow.svg"/> 
      <p>Minimera</p> 
      <img src="assets/arrows/minimizeArrow.svg"/> 
     </div> 

     </div> 
    ) 
    } 
} 

Answer 1

Когда вы визуализируете div с помощью функции, целью и расположением элементов div.

renderDiv() { 
    return (<div> 
      </div>) 
} 

Works, но не

renderDiv() { 
    return 
     (<div> 
     </div>) 
} 

Answer 2

this.returnDiv просто ссылка к функции. Вы не называете это, поэтому он ничего не возвращает. Here're две вещи, которые вы можете сделать:

1. Сделать returnDiv поглотитель, и использовать его, как вы сделали ({this.returnDiv}):

   get returnDiv() { 
       return (
        <div><p>Printing out text!</p></div> 
       ) 
   } 
   

2. вызов returnDiv как функцию: {this.returnDiv()}

Обновление: Вот скрипка, показывающая различные варианты: https://jsfiddle.net/5tsu4df1/.

Answer 3

call returnDiv, также сохраняйте возвращаемый многострочный jsx внутри скобки, иначе он может вернуть значение null;

import React, { Component } from 'react' 

    import ProgressBar from './ProgressBar' 

    require('styles/_servicesPage/priceCalc.css') 

    export default class PriceCalculator extends Component { 

     componentWillMount() { 
     this.state = { 
      arr: [] 
     } 
     } 

     minimizeDiv() { 
     this.props.toggleDiv(false) 
     } 


     returnDiv(){ 
     return (
      <div> 
      <p> 
       Printing out text! 
      </p> 
      </div> 
     ) 
     } 

     render() { 
     var styleVar = { 
      backgroundImage: 'url(assets/images/services/pricecalc_blue_bg.svg)', 
      backgroundPosition: 'right center' 
     } 
     var returnDiv = this.returnDiv(); 

     return (
      <div className="service-form" id="priceCalc" style={styleVar}> 

      <div> 
       <h1>Priskalkyl för badrum</h1> 
       <p> 
       Välkommen att fylla i formuläret, 
       så är du ett steg närmare dina drömmars badrum. 
       </p> 
      </div> 

      {returnDiv} 

      <div onClick={this.minimizeDiv.bind(this)} className="minimizeBorder"> 
       <img src="assets/arrows/minimizeArrow.svg"/> 
       <p>Minimera</p> 
       <img src="assets/arrows/minimizeArrow.svg"/> 
      </div> 

      </div> 
     ) 
     } 
    }