Question

我想创建一个函数，该函数返回无状态功能性React组件的不同版本。我的目标是重构此工作代码：

import React from 'react';
import { Icon } from 'react-icons-kit';
import { socialFacebook, socialTwitter } from 'react-icons-kit/metrize';


export const FacebookIcon = ({ className, size }) => (
  <Icon
    icon={socialFacebook}
    size={size}
    className={className}
  />
);

export const TwitterIcon = ({ className, size }) => (
  <Icon
    icon={socialTwitter}
    size={size}
    className={className}
  />
);

变成这样：

import React from 'react';
import { Icon } from 'react-icons-kit';
import { socialFacebook, socialTwitter } from 'react-icons-kit/metrize';


const ProtoIcon = ({ icon }) => ({ className, icon, size }) => (
  <Icon
    className={className}
    icon={icon}
    size={size}
  />
);

export const FacebookIcon = ProtoIcon(socialFacebook);
export const TwitterIcon = ProtoIcon(socialTwitter);

但是，以上操作失败，问题似乎在于icon没有传递给返回的函数。解决此问题的最佳方法是什么？阅读关于HOC的React手册，我想可以通过返回扩展React.component的类来完成，但是我真的很喜欢上面尝试过的形式。是否有可能以一种实用的方式实现我正在尝试的工作？

谢谢！

EDIT1：为了澄清，我的最终API是(<FacebookIcon size={32} className="some-class">)。

Answer 1

您非常亲密。需要将FacebookIcon和TwitterIcon转换为无状态组件，以便我们可以将道具传递给它。您刚刚创建了一个对ProtoIcon组件的变量引用，不幸的是，该引用在使用时不返回JSX。

import React from "react";
import ReactDOM from "react-dom";
import { Icon } from 'react-icons-kit';
import { socialFacebook, socialTwitter } from 'react-icons-kit/metrize';

const ProtoIcon = (icon, props) => (
  <Icon icon={icon} {...props} />
);

export const FacebookIcon = (props) => ProtoIcon(socialFacebook, props);
export const TwitterIcon = (props) => ProtoIcon(socialTwitter, props);

function App() {
  return (
    <div className="App">
      <FacebookIcon size={32} className="some-class" />
      <TwitterIcon size={32} className="some-class"/>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

将道具传递到高阶无状态功能React组件

1 个答案: