javascript - 如何在 React 上读取事件中的 Prop

Question

我通过 React 和 Firebase 创建聊天系统。
聊天系统的数据由 Firebase RealTimeDatabase 管理。
现在点这里
网址:https://react-chat-b0e8a.firebaseapp.com/
Github: https://github.com/kaibara/React-chat

我正在尝试实现删除按钮，但我不知道如何让子组件event 读取父组件this.props。 作为对此的解决方案，我正在考虑让 this.props 在 render 之前读取。 但我不知道该怎么做。 你能在下面的代码中分享这个问题的解决方案吗？

App.js - parenet 组件

import React, { Component } from 'react'
import firebase from 'firebase/app'
import { firebaseApp,firebaseDB } from './firebase/firebase'
import ChatMessage from './components/ChatMessage'

const messagesRef = firebaseDB.ref('messages')

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text : "",
      user_name: "",
      messages: []
    }
  }
  componentWillMount() {
    messagesRef.on('child_added', (snapshot) => {
      const m = snapshot.val()
      let msgs = this.state.messages
      msgs.push({
        'text' : m.text,
        'user_name' : m.user_name,
        'key': snapshot.key
      })
      console.log({msgs})
      this.setState({
        messages : msgs
      })
      console.log(this.state.messages)
    })
  }
  render() {
    return (
      <div className="App">
        <div className="MessageList">
          <h2>メッセージログ</h2>
          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} messages={m} />
          })}
        </div>
      </div>
    )
  }
}

export default App

ChatMessage.js - 子组件

import React,{Component} from 'react'
import { firebaseDB } from '../firebase/firebase'

const messagesRef = firebaseDB.ref('messages')

class ChatMessage  extends Component {
  onRemoveClick(){
    messagesRef.child(this.props.messages.key).remove()
    //　I want to load `this.props.messages.key` here
  }
  render(){
    return(
      <div className="Message">
        <p>{this.props.messages.key}</p>
        <p className="MessageText">{this.props.messages.text}</p>
        <p className="MessageName" style={user}>by&nbsp;{this.props.messages.user_name}</p>
        <button className="MessageRemove" onClick={this.onRemoveClick}>削除</button>
      </div>
    )
  }
}

export default ChatMessage

请把你的知识借给我。
谢谢。

Answer 1

Implement the handler in your parent component and pass the reference down to child component has props

在 App 组件中实现 onRemoveClick() 并将 `props' 中的处理程序引用传递给 ChatMessage 组件。

应用组件:

 deleteMessageHandler = (key) =>{
    const messages = [...this.state.messages];
    messages = messages.splice(key,1);
    this.setState({messages:messages});
  }

聊天消息:

render() {
    return (
      <div className="App">
        <div className="MessageList">

          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} messages={m} deleteMessageHandler={this.deleteMessageHandler}/>
          })}
        </div>
      </div>
    )
  }

注意:不要使用 map 的索引有 map 中组件的键，它是一种反模式，它应该是适当的唯一 ID。