如何将道具传递给子对象？孩子们只会有一个按钮或一个文本答案

【问题标题】：How to pass props to a children object? children will only have a button or a text如何将道具传递给子对象？孩子们只会有一个按钮或一个文本
【发布时间】：2021-11-09 03:15:51
【问题描述】：

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}
    >

在我上面提到的代码中，我想返回子项（this.props.children）而不是按钮以使其更通用。相当于：

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

【问题讨论】：

triggerProps 是什么，children 是什么？您能否提供更多关于Popover的详细信息
这个来自原生基础库！按钮或文本或我们传递的任何子项都是调用弹出窗口的实际触发器，它自己的道具是 triggerprops。

标签： javascript reactjs react-native ecmascript-6 jsx

【解决方案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

【讨论】：