react-icons设置子图标的大小

Question

我想做但不可能的事情是这样的:

import { FaBook } from 'react-icons/fa';
const Parent = () => <Child icon={FaBook}>Save</Child>;

然后在子

const Child = ({ icon }) => (
<div>
<Icon as={icon} size={20} />
<Icon as={icon} size={30} />
</div>
);

这样我就不必分别传递iconSmall和iconLarge道具了，大小是唯一的微分器。是否有一种反应方式，我可以在孩子身上添加size属性?

Answer 1

Icon组件。像这样的?

Parent.js

import React from 'react';
import {FaBook} from 'react-icons/fa';
import Child from './Child';
const Parent = () => <Child icon={FaBook}>Save</Child>;
export default Parent;

Child.js

import React from 'react';
const Child = ({icon}) => (
<div>
{icon({size: 20})}
{icon({size: 30})}
</div>
);
export default Child;