Zurück und machen ein div in Reagieren

Ich versuche die Rückgabe eines div dynamisch aus einer Funktion reagieren. Im Aufruf einer Funktion zu machen, direkt in die Komponenten render-Funktion, aber es nicht machen. Im sicher, dass es ein einfacher Fehler im code aber ich kann es erkennen.

Code:

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>
    )
  }
}
Sie sind nicht eine Funktion aufrufen. Ersetzen {this.returnDiv} mit {this.returnDiv()}
Ich habe versucht mit {dies.returnDiv()} aswell. Habe auch versucht die erste alternative. Ich nicht einmal in der element-Inspektor!

InformationsquelleAutor AlfredOdling | 2016-09-21

  1. 0

    call returnDiv, auch halten Sie Ihr zurückgegeben multiline jsx in Klammern, sonst return 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>
        )
      }
    }

    InformationsquelleAutor StackOverMySoul

  2. 0

    this.returnDiv ist nur ein Referenz an eine Funktion. Sie sind nicht gefordert, die ist, warum es nicht etwas zurückzugeben. Hier sind zwei Dinge, die Sie tun können:

    1. Machen returnDiv eine get-Methode, und verwenden Sie es, wie Sie getan haben ({this.returnDiv}):

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

    2. Call returnDiv als Funktion: {this.returnDiv()}

    Update: Hier ist ein Turnschuh, der die verschiedenen alternativen: https://jsfiddle.net/5tsu4df1/.

    Ich habe versucht mit {dies.returnDiv()} aswell. Habe auch versucht die erste alternative. Ich nicht einmal in der element-Inspektor!
    Das ist komisch. Ich habe soeben die Antwort mit einer Geige zeigen die verschiedenen alternativen, machst du es so?

    InformationsquelleAutor tobiasandersen

  3. 0

    Wenn Sie machen eine div über eine Funktion, die intendation und Platzierung der div-Angelegenheiten. 

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

    Funktioniert aber nicht

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

    InformationsquelleAutor AlfredOdling

Schreibe einen Kommentar