Question

我正在尝试从父母那里访问道具“ post”。我可以在render（）中访问它，但是不能在我的getCom（）上方访问它。如何使prop在功能中可用，而不仅在渲染中可用？我尝试使用this.item.id.bind(this)，但这不起作用。

父母：

<LoadComments post={item.id}/>

孩子

class LoadComments extends Component {
  getCom = async () => {

    // Thid does not work

    this.unsubscribe = await firestore.collection("comments").where("post", "==", this.props.post).onSnapshot((querySnapshot) => {
     // Rest of code

  }
  render() {
    return (

      // This works:

      {this.props.post}

    )
  }

Answer 1

如您所见，您将id作为post传递给子组件：

<LoadComments post={item.id}/>

因此您必须使用此：

this.props.post

如果要使用id，则必须像这样id粘贴它：

<LoadComments id={item.id}/>

Answer 2

使用

的值

 item.id

在子组件中，您应该做的是：

在父母中：

<LoadComments post={item.id}>

在子组件中：

class LoadComments extends Component {

   async getCom(props) => {

   // This would work now

  this.unsubscribe = await firestore.collection("comments").where("post", "==", 
  props.post).onSnapshot((querySnapshot) => {
   // Rest of code

   }
  render() {
    const props = this.props;
      return (

        {this.props.post}

        getCom(props)

 )
}

您必须将props存储在render方法的静态组件中，然后将props传递给render方法外部声明的函数。

在渲染器外使用道具

2 个答案: