javascript - 祖 parent 组件不将参数传递给函数

Question

我对理解 React 如何将函数作为 props 传递给子组件有一些疑问。我已经看过一些教程，但目前没有理解我的问题。

基本上我有一个简单的组件向下传递一个列表，另一个组件使用 Array.map 处理列表以呈现另一个组件。

基本上我有以下内容:

App.js -> 报价单 -> 报价单。

我想处理对 Quote 组件的点击。所以每次用户点击 Quote 我都想在 APP.js 上处理它。

我已经尝试将引用作为 prop 向下传递并在 app.js 引用组件中调用该函数，但它没有用。

这是我到目前为止尝试过的:

App.js

import React, { Component } from 'react';
import classes from './App.module.css';

import Quotes from '../components/quotes/quotes'

class App extends Component {
  state = {
    quotes: [
      { id: 1, text: "Hello There 1" },
      { id: 2, text: "Hello There 2" },
      { id: 3, text: "Hello There 3" },
      { id: 4, text: "Hello There 4" }
    ],
    clickedQuote: "none"
  }

  handleClickedQuote (id) {
    console.log(id)
    const quoteIndex = this.state.quotes.findIndex(q => q.id === id)

    this.setState({
      clickedQuote: this.state.quotes[quoteIndex].text
    })
  }

  render() {
    return (
      <div className="App">
        <div className={classes['quotes-wrapper']}>
          <Quotes clicked={this.handleClickedQuote} quotes={this.state.quotes}/>
          <p>clicked quote {this.state.clickedQuote}</p>
        </div>
      </div>
    );
  }
}

export default App;

Quotes.js

import React from 'react';
import Quote from './quote/quote'

const quotes = (props) => props.quotes.map((quote) => {
  return (
    <Quote clicked={props.clicked} text={quote.text}/>
  )
})

export default quotes

引用.js

import React from 'react';
import classes from './quote.module.css'

const quote = (props) => {
  return (
    <div onClick={() => props.clicked(props.id)} className={classes.quote}>
      <p className={classes['quote-text']}>{props.text}</p>
    </div>
  )
}

export default quote

我需要在 App.js 函数中获取 hanleClickedQuote 的 ID。我做错了什么？

Answer 1

您需要将 id 作为 prop 显式传递。因此，在 map() 中的 Quotes.js 中，类似于:

<Quote id={quote.id} clicked={props.clicked} text={quote.text}/>

更新:正如@Ashkan 在他们的回答中所说，您还需要正确绑定(bind)您的处理程序。