在 ReactJS/NextJS 中将组件属性传递到字符串中

Question

我有以下组件

import Link from "next/link";

import styles from "./product.module.css";

export default function Product(props) {

  return (

    <div className={styles.product}>

      <Link href={props.link}>

        <img src={props.img} alt={props.name} />

      </Link>

      <Link href={props.link}>

        <h3>{props.name}</h3>

      </Link>

      <span>{props.price}</span>

              <button onClick={handleClick}>

          Add to Bag 

        </button>

    </div>

  );  

}

我正在尝试添加一个名为 handleClick 的 onClick 并进行测试，我正在尝试运行包含以下内容的控制台日志{props.name} has been added to the basket at a price of {props.price}

但是，onClick 我收到以下错误：TypeError: undefined is not an object (evaluating '_this.props')

解决这个问题的过程是什么？

handleClick 函数的代码如下。

const handleClick = (e) => {

        console.log(`${this.props.name} + "added to basket at price of " + ${this.props.price} + "`);

}

Answer 1

在函数组件中，它没有关于 的上下文this。为什么不像在返回函数中那样使用道具。export default function Product(props) {&nbsp; &nbsp; const handleClick = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`${props.name} + "added to basket at price of " + ${props.price} + "`);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className={styles.product}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link href={props.link}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src={props.img} alt={props.name} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link href={props.link}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>{props.name}</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{props.price}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={handleClick}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Add to Bag&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}