Question

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

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

基本上我有以下内容：

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

我想处理对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

您需要显式传递ID作为道具。因此，在您的Quotes.js中的map()中，像这样：

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

更新：正如@Ashkan在回答中所说，您还需要正确绑定处理程序。

Answer 2

在您的代码中有两件事很不对劲。第一个是JS社区中的常见问题。我建议您更深入地了解'this'关键字的用法。在App.js中，您正在将方法定义为函数声明。

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

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

现在函数声明中的'this'关键字是动态设置的，这意味着'this'实际上是在调用函数时设置的，并且由于它是一个事件处理程序，因此'this'的值实际上就是您的事件！您可以测试一下。但是我们希望'this'引用我们的类，以便我们可以访问状态。

有两种解决方法，第一种：

您可以像这样（旧方法）在App.js类的构造函数中为“ this”绑定正确的值：

constructor(props) {
    super(props);
    this.handleClickedQuote = this.handleClickedQuote.bind(this);
}

这将用您的对象构造步骤中使用正确的“ this”值的版本替换类中的方法。

或更简单的是，您可以使用箭头函数，因为箭头函数中的'this'关键字是按词法设置的：

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

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

注意：在箭头函数中，“ this”的值基本上是指该代码块之外的任何内容，在这种情况下，这是您的整个对象。

您在代码中也犯了一个小错误，有人提到过。您实际上忘记了将报价ID作为道具传递给Quote组件。但这只是一个小小的疏忽。重要的是要知道这个问题与React的关系比JS本身少。我的建议是对JS进行更深入的学习，并学习该语言的所有怪癖和技术知识。它将为您节省很多麻烦。还可以使用您的调试技能，因此像丢失道具这样的错误就不那么容易掉进裂缝。

祝你好运

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

2 个答案: