コンポーネントonClickをReactでレンダリングする方法は？

Question

親コンポーネントから渡される特定の場所のマップをレンダリングしようとしています。 google-maps-reactを使用していて、2つのことがわかりません。

onClickの関数を呼び出す方法そして、私が望むコンポーネントをレンダリングする関数を私のクラスに書く方法。これは義和TIがこれまで持っている：レンダリング時barが定義されていないため、現時点では

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; 

を、そのコンパイルに問題があります。どんな提案/助言？

Answer 1

まず、Reactコンポーネントでは、仮想DOM（Reactによってメモリに保持されます）と具体的なDOMがユーザーに表示されるものとの間のブリッジです。私はReactについてもっと詳しく知っていますcomponent's lifecycle - これを理解することは理解しています。

さらに、GoogleMapContainerをページに表示するには、renderMap()メソッドをReact render()メソッドで呼び出し、結果を変数に格納して戻す必要があります。

onClickの複数の関数を完全に呼び出す場合は、ハンドラに関数を渡し、必要な関数をいくつ呼び出しします。

チェックこの例：

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