时间戳

首页 > 解决方案 > 如何在函数中定义道具

reactjs - 如何在函数中定义道具

问题描述

我是新手，我正在尝试在函数中使用道具，但我不确定如何使用它。这是代码。

import React from 'react';
import './Card.css';
import { connect } from 'react-redux';
import { addBasket } from '../actions/addAction';
function Card({props},{image, title,author,price}) {
    return (
        <div className='card-container'>
            <div className="image-container">
                <img src={props.image} alt='' />
            </div>
            <div className="card-content">
                <div className="card-title">
                    <h3>{props.title}</h3> </div>
                <div className="card-author">
                    <h4>{props.author}</h4>
                </div>
                <div className="card-price">
                    <h3> <span>£{props.price}</span></h3> </div>
            </div>
            <div className="btn">
                <button>
                    <a onClick={props.addBasket}>
                        Add to Basket
                    </a>
                </button></div>
        </div>
    );
}

export default connect(null, { addBasket })(Card);

这就是我得到的错误。TypeError：无法读取未定义的属性“标题”

 </div>
  <div className="card-content">
   <div className="card-title">
       <h3>{props.title}</h3> </div>
    <div className="card-author">
   <h4>{props.author}</h4>
   </div>

标签： reactjsreact-redux

解决方案

代替

function Card({props},{image, title,author,price}) {

和

function Card(props) {

我建议在使用 Redux 之前阅读官方的 React 教程。

推荐阅读