将图标组件传递给 ReactJS 中的另一个组件 [英] Passing an icon component to another component in ReactJS

查看：31
本文介绍了将图标组件传递给 ReactJS 中的另一个组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有这个 CardHeader 组件，我想接​​收一个 titleIcon 道具(这是一个反应组件)，如下所示:

导出默认函数 CardHeader({ title, cardContent, titleIcon }) {返回 (<S.MiddleContainer><div className="white-card"><div className="campaign-title p-1"><div className="d-flex justify-content-center align-items-center pt-1">{标题图标}<span id="title">{title}</span>

<div className="pr-2"><MdInfo color="#969FAA" size={28}/>

<p id="边框"/><div className="campaign-information">{卡片内容}

</S.MiddleContainer>

这是我传递图标道具的地方

import { MdInfo } from 'react-icons/md'<Col md={3}><S.ProductContainer><卡片头标题="赞助商频道"icon="<MdInfo color="#969FAA" size={28}/>"/><卡片标题="移动通知提升"/></S.ProductContainer></Col>

解决这个问题的最佳方法是什么?

解决方案

您可以将图标作为 React.Node(而不是字符串)传递，如下所示:

 <S.ProductContainer><卡片头标题="赞助商频道"icon={<MdInfo color="#969FAA" size={28}/>}/><卡片标题="移动通知提升"/></S.ProductContainer></Col>

您将可以通过 CardHeader 中的道具访问它:

导出默认函数 CardHeader({ title, cardContent, icon }) {返回 (<S.MiddleContainer><div className="white-card"><div className="campaign-title p-1"><div className="d-flex justify-content-center align-items-center pt-1">{图标}<span id="title">{title}</span>

<div className="pr-2"><MdInfo color="#969FAA" size={28}/>

<p id="边框"/><div className="campaign-information">{卡片内容}

Lets say I have this CardHeader component and I want to receive a titleIcon props (which is a react component) like this: 

export default function CardHeader({ title, cardContent, titleIcon }) {
  return (
    <S.MiddleContainer>
      <div className="white-card">
        <div className="campaign-title p-1">
          <div className="d-flex justify-content-center align-items-center pt-1">
            {titleIcon}
            <span id="title">{title}</span>
          </div>
          <div className="pr-2">
            <MdInfo color="#969FAA" size={28} />
          </div>
        </div>

        <p id="border" />
        <div className="campaign-information">
         {cardContent}
        </div>
    </div>
  </S.MiddleContainer>

This is where I pass the icon prop

import { MdInfo } from 'react-icons/md'

    <Col md={3}>
            <S.ProductContainer>
              <CardHeader 
              title="Sponsors Channel" 
              icon="<MdInfo color="#969FAA" size={28} />"/>

              <Card title="Mobile notification boost" />
            </S.ProductContainer>
          </Col>

What is the best way to approach this?

解决方案

you can pass your icon as a React.Node (not as a string), like so :

     <Col md={3}>
        <S.ProductContainer>
          <CardHeader 
          title="Sponsors Channel" 
          icon={<MdInfo color="#969FAA" size={28} />} />

          <Card title="Mobile notification boost" />
        </S.ProductContainer>
      </Col>

And you will have access to it via props in CardHeader :

export default function CardHeader({ title, cardContent, icon }) {
return (
<S.MiddleContainer>
  <div className="white-card">
    <div className="campaign-title p-1">
      <div className="d-flex justify-content-center align-items-center pt-1">
        {icon}
        <span id="title">{title}</span>
      </div>
      <div className="pr-2">
        <MdInfo color="#969FAA" size={28} />
      </div>
    </div>

    <p id="border" />
    <div className="campaign-information">
     {cardContent}
    </div>
</div>

这篇关于将图标组件传递给 ReactJS 中的另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆