在React中返回并渲染div

Question

我试图从反应中的函数中动态返回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>) 
} 

Answer 2

this.returnDiv仅仅是一个参考到一个函数。你不会调用它，这就是为什么它不会返回任何东西。我这里还有两件事情可以做：

1. 让returnDiv一个getter，并使用它像你这样做（{this.returnDiv}）：

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

2. 呼叫returnDiv作为一个函数：{this.returnDiv()}

更新：这是一个小提琴，显示不同的替代品：https://jsfiddle.net/5tsu4df1/。

Answer 3

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