在 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) {

    const handleClick = (e) => {

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

    }

    

    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>

    );

}