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 组件是什么。 像这样的东西？

父.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;