如何克隆儿童反应

Question

我想编写一个简单的组件，它确实克隆了孩子并在其中添加marginBottom: 30。

使用<View>作为兄弟姐妹，这确实很棒。不幸的是，它无法使用组件作为兄弟姐妹。

CustomListItem组件：

// @flow
import * as React from 'react';
type Props = {
  children: React.Node,
};
/**
 *
 */
function CustomListItem ({ children }: Props) {
  return React.Children.map(children, child => {
    const style = [
      child.props.style,
      { marginBottom: 30 },
    ];
    return React.cloneElement(child, { style });
  });
}
export default CustomListItem;

使用组件的结果：

// works
<CustomListItem>
    <Text>This is great.</Text>
</CustomListItem>
// works as well
<CustomListItem>
    <View>
        <CustomComponent></CustomComponent>
    </View>
</CustomListItem>
// does not work. Why?
<CustomListItem>
    <CustomComponent></CustomComponent>
</CustomListItem>

这是我一直用于测试目的的CustomComponent：

// @flow
import * as React from 'react';
import { View } from 'react-native';
type Props = {
  children: React.Node,
};
function CustomComponent(props: Props) {
  return <View>{props.children}</View>;
}
export default CustomComponent;

我是否将<Text>或<View>元素插入我的<CustomComponent>的孩子，所以我没有在此示例中插入此内容。

Answer 1

那是因为您的组件没有委派样式prop。通常，将style传递给自定义组件并非自动样式，您必须手动设置它：

type Props = {
  children: React.Node,
  style: object
};
function CustomComponent(props: Props) {
  return <View style={props.style}>{props.children}</View>;
}

这将从props捕获style属性，并将其应用于包装View。

---

you 可以使用高阶组件，但是结果几乎相同，尽管您可以使其更重复使用：

const withStyles = (component, style) => React.cloneElement(component, { style });

然后将其用作：

return withStyles(child, style);

通常，HOC具有对实际组件函数或类（例如CustomComponent ）的参考，而不是已经创建的元素。但是在这种情况下，您不会那么有用。