Question

我有两个组件：A应用中的B和React。它们都访问组件C，该组件可以有6种不同的类型（类型通过props对象传递）。现在，我在A中定义了4种类型，在B中定义了2种类型，就像字符串一样。我不喜欢C的类型现在分布在A和B之间。根据最佳实践在架构上可以采取什么措施来避免这种情况？我听说Redux可能会有所帮助，但是，我无法从头开始重写整个应用程序，从我对Redux的了解来看，似乎很有必要。我希望组件的所有类型都在该组件附近，以便可以轻松查找。

Answer 1

“类型”是什么以及它们之间的区别有点模糊。没有更多信息，我只能猜测将组件C分解为多个其他组件（可能使用同一个内核）是有意义的。然后，A / B不仅会传递道具来神奇地更改C，而且会直接实现C的不同版本（如果仍然需要，可以传递道具）。

按钮就是一个很好的例子。那里有各种各样的按钮，但是所有按钮的处理逻辑几乎相同。

const TYPES = {
  PRIMARY: 'primary',
  WARNING: 'warning',
  DANGER: 'danger',
  SUCCESS: 'success',
}

const BaseButton = ({ 
  text, 
  onClick, 
  buttonType,
}) => (
  <button
    type={type}
    onClick={onClick}
    classnames=(styles[ buttonType ], styles.button) 
    >
    {text}
  </button>
);
export const Primary = props => (
  <BaseButton { ...props } buttonType={TYPES.PRIMARY} />
);
export const Warning = props => (
  <BaseButton { ...props } buttonType={TYPES.WARNING} />
);
export const Danger = props => (
  <BaseButton { ...props } buttonType={TYPES.DANGER} />
);
export const Success = props => (
  <BaseButton { ...props } buttonType={TYPES.SUCCESS} />
);

您还可以在这里看到const TYPES的使用：定义可用元素的不同类型的对象。在组件中实现并可能已导出的该常数还可以用于为不同的选项提供一个可以在其中查找它们的位置。

redux怎么样？

基于状态相互影响的多个组件的确是您可能需要考虑redux的情况。但是，如果仅是这种非常有限的情况，则redux不仅是一个过分的杀伤力，而且如果仅在单个位置使用它，也会创建一个怪异的结构。

处理其他组件中不同类型的组件

1 个答案: