Javascript 在React中返回并渲染div

我试图从react中的函数动态返回div。我正在调用一个函数直接在components render函数中渲染，但它不会渲染。我确信这是代码中的一个简单错误，但我无法发现它

守则：

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>
    )
  }
}

import React，{Component}来自“React”
从“/ProgressBar”导入ProgressBar
要求（'styles/_servicesPage/priceCalc.css'）
导出默认类PriceCalculator扩展组件{
组件willmount（）{
此.state={
arr:[]
}
}
最小EDIV（）{
this.props.toggleDiv（false）
}
returnDiv（）{
返回

打印文本！

}
render（）{
var styleVar={
背景图片：“url（资产/图像/服务/pricecalc_blue_bg.svg）”，
背景位置：'右中'
}
返回(
普里斯卡基尔·弗尔·巴德鲁姆

Välkommen att fylla i formuläret，
这是一个非常好的例子。

{this.returnDiv}
极小值

)
}
}

调用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>
        )
      }
    }

import React，{Component}来自“React”
从“/ProgressBar”导入ProgressBar
要求（'styles/_servicesPage/priceCalc.css'）
导出默认类PriceCalculator扩展组件{
组件willmount（）{
此.state={
arr:[]
}
}
最小EDIV（）{
this.props.toggleDiv（false）
}
returnDiv（）{
返回(

打印文本！

)
}
render（）{
var styleVar={
背景图片：“url（资产/图像/服务/pricecalc_blue_bg.svg）”，
背景位置：'右中'
}
var returnDiv=this.returnDiv（）；
返回(
普里斯卡基尔·弗尔·巴德鲁姆

Välkommen att fylla i formuläret，
这是一个非常好的例子。

{returnDiv}
极小值

)
}
}

当您通过函数呈现div时，div的意图和位置很重要

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

renderDiv（）{
返回(
)
}

有效但无效

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

renderDiv（）{
返回
(
)
}

您没有调用函数。将

{this.returnDiv}

替换为

{this.returnDiv（）}

我也尝试过使用{this.returnDiv（）}。也尝试了第一种选择。我甚至没有在元素检查器中显示！