祖父母组件未将参数传递给函数

Question

我对尝试理解react如何与作为props的功能一起工作，并将它们传递给子组件感到怀疑。我已经看过一些教程，但目前还不了解我的问题。

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

基本上我有以下几点：

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

我想处理对Quote组件的单击。因此，每当用户单击Quote时，我都希望在APP.js上处理它。

我已经尝试过将引用作为道具传递下来，并在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

Quote.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

好了，在您的代码中有两件事是非常错误的。第一个是JS社区中的常见问题。我建议您更深入地了解'this'关键字的用法。在App.js中，您正在将方法定义为函数声明。handleClickedQuote(id) {&nbsp; &nbsp; console.log(id)&nbsp; &nbsp; const quoteIndex = this.state.quotes.findIndex(q => q.id === id)&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; clickedQuote: this.state.quotes[quoteIndex].text&nbsp; &nbsp; })}现在，函数声明中的'this'关键字是动态设置的，这意味着'this'实际上是在调用函数时设置的，并且由于它是一个事件处理程序，因此'this'的值实际上就是您的事件！您可以测试一下。但是我们希望'this'引用我们的类，以便我们可以访问状态。有两种解决方法，第一种：您可以像这样（旧方法）在App.js类的构造函数中为“ this”绑定正确的值：constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.handleClickedQuote = this.handleClickedQuote.bind(this);}这将用您的对象构造步骤中使用正确的“ this”值的版本替换类中的方法。或更简单一点，由于箭头函数中的'this'关键字是按词法设置的，因此可以使用箭头函数：handleClickedQuote = id => {&nbsp; &nbsp; console.log(id);&nbsp; &nbsp; const quoteIndex = this.state.quotes.findIndex(q => q.id === id);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; clickedQuote: this.state.quotes[quoteIndex].text&nbsp; &nbsp; });}注意：在箭头函数中，“ this”的值基本上是指该代码块之外的任何内容，在这种情况下，这是您的整个对象。另外，您在代码中有一个小错误，有人提到过。您实际上忘记了将报价ID作为道具传递给Quote组件。但这只是一个小小的疏忽。重要的是要知道这个问题与React的关系比JS本身的关系少。我的建议是对JS进行更深入的学习，并学习该语言的所有怪癖和技术知识。它将为您节省很多麻烦。还可以利用您的调试技能，这样，像丢失道具这样的错误就不会那么容易地掉入裂缝。