如何使用 React 渲染组件 onClick？答案

【问题标题】：How to render a component onClick with React?如何使用 React 渲染组件 onClick？
【发布时间】：2018-01-11 11:56:37
【问题描述】：

我正在尝试渲染从父组件传递的特定位置的地图。我正在使用 google-maps-react，但我不确定两件事：

如何在我的渲染中调用带有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()

    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;

目前，由于bar 在渲染时未定义，因此编译存在问题。有什么建议/建议吗？

【问题讨论】：

如果 this.props.selectedBar 已定义，您是否尝试选择性地渲染地图？
首先，你的renderMap()应该返回Jsx
你没有在任何地方使用它
而newCard是什么，它是一个函数吗？ onClick 是一个事件处理程序，并期望在触发该事件时执行一个函数 - 在您的情况下，用户按下按钮
是的，抱歉还是新手，我打算在{newBar} 旁边调用函数onClick，但我认为我不能用onClick 调用两个函数。我刚刚更改了 renderMap 函数，因此它返回一个带有 JSX 渲染组件的 div。

标签： reactjs npm jsx google-maps-react

【解决方案1】：

首先，在 React 组件中，render() 方法是虚拟 DOM（由 React 保存在内存中）和向用户显示的具体 DOM 之间的桥梁。我会阅读更多关于 React component's lifecycle 的信息 - 理解这就是理解反应。

此外，为了在页面上显示您的GoogleMapContainer，您需要在 React 的render() 方法中调用您的方法renderMap()，将结果存储在变量中并返回。

为了在onClick 中调用多个函数，这是完全可能的，将一个函数传递给处理程序并调用你想要的函数。

检查这个例子：

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

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

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

  renderMap(){
    // careful!!! 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>
      )
    }
  }
}

【讨论】：