javascript - 在 React 中返回并渲染一个 div

Question

我试图从react中的函数动态返回一个div。我在组件渲染函数中调用一个函数直接渲染出来，但它没有渲染出来。我确信这是代码中的一个简单错误，但我无法发现它。

代码:

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

有效但无效

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