在多个类中使用 Component Props

Question

我制作了一个正在使用的 React 组件并在另一个组件中设置 class:

export default function CourseCard(props) {
    return (
        <a href='/course-kits'>
            <div
                className="bg-white border border-gray-100 rounded-lg text-center shadow-lg align-center hover:cursor-pointer
        hover:shadow-xl hover:-translate-y-2 transition m-6"
            >
                <div>
                    <img
                        src={props.img}
                        alt={props.course + ' Course Hero'}
                        className="w-full h-44 object-cover"
                    />
                </div>
                <p
                    className="px-10 py-2 mb-3 mt-3 text-gray-500"
                >
                    {props.course}
                </p>
            </div>
        </a>
    )
}

这是使用 CourseCards 的套件示例

export default function Kits() {
    return (
        <ContentWrapper>
            <div className="bg-gray-200 m-5">
                <div className="inline-block">
                    <SearchField
                        placeholder="Search"
                        classNames="searchContainer mx-12 my-2"
                    />
                </div>
                <CourseCard
                    course="Senior Development Project II"
                    img={SeniorImage}
                />
                <CourseCard course="Designing The User Experience" img={UXImage} />
                <CourseCard course="NMD Digital Survey I" img={SurveyImage} />
            </div>
        </ContentWrapper>
    )
}

看到我正在使用多个 CourseCards，如何将我在此处设置的道具带到另一个页面中。我想呈现一个使用所选 CourseCard 详细信息的页面，即页面标题将与 props.course 匹配，并且根据所选的 CourseCard 而有所不同（这将在 CourseKits 中完成）。

Answer 1

你可以把课程卡道具提取出来放到一个中心位置。可能只是一个将此数据导出给您的模块。然后在您需要的地方使用它来渲染和重用这些道具。

// course.js
export const CourseData = [
{
   id: 1,
   name: "Senior Development Project II",
   img: SeniorImage 
},
...
]

// App.js

import { CourseData } from './course.js';

...
...
return (
   ...
   {CourseData.map((course) => 
     <CourseCard
        course={course.name}
        img={course.img}
        key={course.id}
       />
   )}
   ...
)

在多个类中使用 Component Props

Using Component Props in multiple classes

reactjs

react-props

在多个 类 中使用 Component Props

Using Component Props in multiple classes

reactjs

react-props

在多个类中使用 Component Props