Question

我正在尝试制作一个将值分配给React js图标组件中的参数“ color”的HOC。我有3种不同的颜色。它们如下： pimary是＃f7a014 次要是＃dd8b08 三元是＃56t00

所以我可以做：

private bool _isChecked;
public bool IsChecked
{
    get { return _isChecked; }
    set
    {
        _isChecked = value;
        //logic to handle the Click event

    }
}

这是我的withColor HOC：

<MyComponent color='primary' />

这里是带有图标的组件：

 import React from 'react';
 import propTypes from 'prop-types';

 function mapColors(color) {
 if (color === 'primary') {
 return '#f8af39';
 }
 if (color === 'secondary') {
 return '#fff';
 }
if (color === 'ternary') {
 return '#004c64';
}}


export const withColor = WrappedComponent => {
const NewComponent = ({ color, ...props }) => (
 <WrappedComponent color={mapColors(color)} {...props} />
  );

  NewComponent.propTypes = {
  color: propTypes.oneOf(['primary', 'secondary', 'ternary']),
 };
  return NewComponent;
  };

  export default withColor;

我是HOC的新手，无法为其分配原色。感谢您的帮助。

Answer 1

您定义了HOC，但从未通过它传递任何组件。例如

import withColor from 'HOC/WithColor'; // your HOC
import SomeComponent from 'SomeComponent'; // component that you would like to use with HOC

然后，您需要定义一个组件，该组件是将HOC应用于您的组件的结果：

const ColoredComponent = withColor(SomeComponent);

然后您可以按预期使用它：

<ColoredComponent color="primary" />

如何使用HOC为React中的组件分配值？

1 个答案: