Question

我有一个自定义组件，用于包装Limited Style Inheritance 的原生<Text>组件。在我的自定义组件中，我在function style中有prop来动态评估自定义font prop并确定要呈现的字体。

这是我的组成部分：

import React from 'react';
import { Text } from 'react-native';
import styles from './styles';

const evaluateFont = (font = 'regular') => {
  console.log('[evaluateFont]');
  switch (font) {
    case 'regular':
      return styles.fontRegular;
    case 'semibold':
      return styles.fontSemibold;
    case 'bold':
      return styles.fontBold;
  }
};

const MyText = (props) => {
  const { children, style, font, ...rest } = props;

  return (
    <MyText>
      <Text
        style={[evaluateFont(font), style]}
        {...rest}
      >
        {children}
      </Text>
    </MyText>
  );
};

export default MyText;

但是在运行我的应用时，我遇到了Maximum call stack size exceeded错误。为什么我的evaluateFont() fn导致了这个＆amp;继续跑？

Answer 1

您的问题不是evaluateFont()，而是您的退货声明中的<MyText></MyText>造成了导致堆叠问题的问题。尝试删除无关的<MyText></MyText>并查看其是否有效。

React Native：自定义组件w / prop中的函数 - 超出最大调用堆栈大小

1 个答案: