Wie man eine Komponente onClick mit React rendert?

Question

Ich versuche, eine Karte eines bestimmten Ortes zu rendern, der von einer übergeordneten Komponente übergeben wird. Ich verwende google-maps-react und bin mir zweierlei unsicher:

So rufen Sie Funktionen mit onClick in meinem Render auf. Und wie schreibe ich die Funktion in meiner Klasse, die die gewünschte Komponente rendert. Dies ist wha tI hat bisher:

import React, { Component } from 'react'; 
import yelp from 'yelp-fusion'; 
import xhr from 'xhr'; 
import GoogleMapContainer from './Map'; 

class BusinessCard extends Component { 
    constructor() { 
    super() 

    this.renderMap = this.renderMap.bind(this); 
    } 

    renderMap(){ 
    <GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} /> 
    } 

    render() { 
    const newCard = this.props.newCard 
    const bar = this.props.selectedBar 
    // console.log("this are the coordinates", bar["coordinates"]) 
    if(bar.coordinates){ 
     return (
     <div> 
      <p>{bar.coordinates.longitude}</p> 
      <p>{bar.name}</p> 
      <img src={bar.image_url} /> 
      <button> X </button> 
      <button onClick={newCard}> Yes </button> 

     </div> 
    ) 
    } else { 
     return(
     <div>Loading...</div> 
    ) 
    } 
    } 
} 

export default BusinessCard; 

Im Moment gibt es ein Problem mit dem Compilieren seit bar undefiniert ist beim Rendern. Irgendwelche Vorschläge/Ratschläge?

Answer 1

Zunächst ist die render() Methode in einer React-Komponente Ihre Brücke zwischen dem virtuellen DOM (im Speicher von React gehalten) und dem konkreten DOM, was dem Benutzer angezeigt wird. Ich würde mehr über eine React lesen component's lifecycle - Verständnis dafür ist Verständnis zu reagieren.

Um Ihre GoogleMapContainer auf der Seite anzuzeigen, müssen Sie Ihre Methode renderMap() in der Methode React render() aufrufen, das Ergebnis in einer Variablen speichern und zurückgeben.

Für den Aufruf von mehreren Funktionen in onClick, die völlig möglich ist, übergeben Sie eine Funktion an den Handler und rufen Sie, wie viele Funktionen Sie dort möchten.

prüft dieses Beispiel:

import React, { Component } from 'react'; 
import yelp from 'yelp-fusion'; 
import xhr from 'xhr'; 
import GoogleMapContainer from './Map'; 

class BusinessCard extends Component { 
    constructor() { 
    super() 

    // LOOK MORE WHAT 'this' means!! <- the key of javascript = execution context 
    this.renderMap = this.renderMap.bind(this); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    renderMap(){ 
    // carefull!!! bar is undefined. Look more what 'this' means in javascript 
    const bar = this.props.selectedBar; 
    return (
     <GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} /> 
    ); 
    } 

    handleClick() { 
    const newCard = this.props.newCard; 

    // call the newCard function prop (if only is a function!!!) 
    newCard(); 

    // another method call 
    this.anotherMethod(); 
    } 

    anotherMethod() { 
    console.log('heyo!'); 
    } 

    render() { 
    const newCard = this.props.newCard 
    const bar = this.props.selectedBar 
    // console.log("this are the coordinates", bar["coordinates"]) 
    if(bar.coordinates){ 
     const renderMap = this.renderMap(); 
     return (
     <div> 
      <p>{bar.coordinates.longitude}</p> 
      <p>{bar.name}</p> 
      <img src={bar.image_url} /> 
      <button> X </button> 
      <button onClick={this.handleClick}> Yes </button> 
      { renderMap } 
     </div> 
    ) 
    } else { 
     return(
     <div>Loading...</div> 
    ) 
    } 
    } 
}