如何将道具传递给 children object？ children 只会有一个按钮或一个文本

Question

export const PopOver = ({
  children, -----------------------------------------> I get children
  headerText,
  bodyText,
  hasHeader,
  hasBody,
  hasFooter,
  cancelButtonText,
  okButtonText,
  hasCloseButton,
  onOkPress,
  onCancelPress,
  ...rest
}: PopoverProps): JSX.Element => {
  return (
    <Popover
      trigger={(triggerProps) => {
        return <Button {...triggerProps}>Trigger</Button>; //How do I pass trigger props to the children I get???
      }}
      {...rest}
    >

在我上面提到的代码中，我想 return children (this.props.children) 而不是按钮以使其更通用。相当于：

return (
    <Popover
      trigger={(triggerProps) => {
        return <child {...triggerProps}>Trigger</child>;
      }}
      {...rest}
    >

Answer 1

试试这个：

<Popover
  trigger={triggerProps => 
    React.Children.map(children, child =>
      React.isValidElement(child) 
        ? React.cloneElement(child, { ...triggerProps }) 
        : child
    )
  }
  {...rest}
/>

参考文献：

https://reactjs.org/docs/react-api.html#reactchildren

https://reactjs.org/docs/react-api.html#cloneelement

如何将道具传递给 children object？ children 只会有一个按钮或一个文本

How to pass props to a children object? children will only have a button or a text

javascript

jsx

ecmascript-6

reactjs

react-native