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

那是因为你的组件没有委托样式道具。在React中，将style传递给自定义组件并不会自动设置它，您必须手动设置它：

type Props = {
  children: React.Node,
  style: object
};

function CustomComponent(props: Props) {
  return <View style={props.style}>{props.children}</View>;
}

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

你可能使用更高阶的组件，但它会变得非常相似，尽管你可以使它更具可重用性：

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

然后将其用作：

return withStyles(child, style);

通常HOC对实际组件函数或类CustomComponent 具有引用，而不是已创建的元素。但在这种情况下，你并非如此，他们没那么有用。

如何在React中克隆孩子

1 个答案: