访问功能组件React Native的JSX组件

Question

我有两个组件，一个是功能组件，另一个是类组件：

export default function SimpleTextButton(props) {
return (
<View style={generalStyles.buttonPadding}>
<Button
title={props.title}
onPress={props.onPress}
buttonStyle={{
borderRadius: 7,
marginLeft: 50,
marginRight: 50,
}}
titleStyle={{
color: props.color,
paddingHorizontal: 20,
fontSize: 15,
}}
/>
</View>
);
}

class GlobalStyles extends React.Component {
static propTypes = {
children: PropTypes.array.isRequired,
};
passRecursiveStyles = (children) => {
return React.Children.map(children, (child) => {
if (!React.isValidElement(child)) return child;
const childProps = mergeDeep(defaultTheme(), child.props);
childProps.children = this.passRecursiveStyles(child.props.children);
return React.cloneElement(child, childProps);
});
};

render() {
const { children } = this.props;
return <Fragment>{this.passRecursiveStyles(children)}</Fragment>;
};
}

因为SimpleTextButton是一个功能组件，我不能作为props.children访问Button，有办法这样做吗？最好不更改SimpleTextButton功能。

我希望能够在我的代码中只使用一个GlobalStyle向我的应用程序的每个组件添加道具，为此我需要访问SimpleTextButton 等功能组件内部的组件

Answer 1

根据您的代码，您应该进行以下更改：

• 将Button组件包装为GlobalStyles的子组件
• 确保已在功能组件中导入GlobalStyles

export default function SimpleTextButton(props) {
return (
<View style={generalStyles.buttonPadding}>
<GlobalStyles>
<Button
title={props.title}
onPress={props.onPress}
buttonStyle={{
borderRadius: 7,
marginLeft: 50,
marginRight: 50,
}}
titleStyle={{
color: props.color,
paddingHorizontal: 20,
fontSize: 15,
}}
/>
</GlobalStyles>
</View>
);
}