Question

我有一个组件A：

import React, { Component } from 'react'
import Gmap from '../global/gmap.component'

class RandomPlace extends Component {
  render() {
    return (
      <Gmap address={this.state.random.location} />

其中包括Gmap组件：

class Gmap extends Component {
  componentDidMount () {

  }
  render() {
    return (
      <div className="gmap-component">
        <p>{this.props.address}</p>

当我点击组件<p>{this.props.address}</p>上的“重新加载”按钮时，此A会很好地显示和更新。此时，React Chrome扩展程序可以很好地显示道具的地址内容。并且看到它在“重新加载”行动中得到了很好的更新。

问题是，我似乎无法在我的组件address的内部函数中找到道具属性Gmap，例如componentDidMount()或aCustomFunction()。

我测试了这个：

componentDidMount () {
    console.log('gmap did mount')
    this.setState({address: this.props.address})
    let x = this.props.address
    let y = this.state.address

    console.log(x)
    console.log(y)

在类的顶部使用构造函数：

constructor (props) {
    super(props)

    this.state = {
      address: 'xx'
    }

但没有出现。我是React的新手，确定我错过了一些非常基本的东西，但是无法看到它。提前谢谢。

Answer 1

您是否在询问如何在子组件上调用自定义函数？如果是的话，

  <Gmap address={this.state.random.location}  ref={(map) => { this.map = map; }} />

然后

this.map.aCustomFunction()

React获取子组件中的道具以用于内部函数使用

1 个答案: