Блог

Я пытаюсь создать пользовательскую кнопку для своего приложения, чтобы использовать ее позже, она выглядит так

 const BUTTON_SHAPE: ViewStyle = {
  borderRadius: 30,
  alignItems: 'center',
  justifyContent: 'center',
};
export interface AppButtonProps {
  style?: ViewStyle;
  child?: Element | React.ReactNode;
}
const AppButton = (props: AppButtonProps) => {
  const {style, child} = props;
  return (
    <TouchableOpacity style={[style, BUTTON_SHAPE]}>{child}</TouchableOpacity>
  );
};
export default AppButton;
 

Но. когда я использую это в приложении:

  <ViewContainer style={{alignItems: 'center', justifyContent: 'center'}}>
      <AppButton>
        <Text>Hello</Text>
      </AppButton>
      <AppText>Login</AppText>
    </ViewContainer>
 

Это показывает ошибку:

 Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes amp; AppButtonProps'
 

Как я могу это исправить, что я сделал не так? Пожалуйста, помогите, большое вам спасибо

Чтобы передать дочерние элементы в React, вы должны использовать специальное children свойство.

просто обновите свою AppButton child опору, чтобы children

 const BUTTON_SHAPE: ViewStyle = {
  borderRadius: 30,
  alignItems: 'center',
  justifyContent: 'center',
};
export interface AppButtonProps {
  style?: ViewStyle;
  children?: Element | React.ReactNode;
}
const AppButton = (props: AppButtonProps) => {
  const {style, children} = props;
  return (
    <TouchableOpacity style={[style, BUTTON_SHAPE]}>{children}</TouchableOpacity>
  );
};