在解构 child 中处理道具

Question

我有一个 React 组件，它用额外的道具克隆了它的 children。我正在使用标准 childrenWithProps 方法，如果您的 child 是另一个反应组件，该方法效果很好，但没有明确的方法可以在没有直接反应组件的情况下执行此操作，例如 child.

<DataCmp>
   <Fragment>
      <h1>Example Code</h1>
      <div>{isLoggedIn}</div>
   </Fragment>
</DataCmp>

在这个例子中，我将属性 myData 添加到其 children 的属性中。但是，这不起作用。 child 看不到该值。 props传入的时候会说myData is not set.

所以我尝试了这个：

<DataCmp>
   <Fragment>
      <h1>Example Code</h1>
      <div>{this.props.isLoggedIn}</div>
   </Fragment>
</DataCmp>

这会引发错误，因为它不知道 this.props.myData 是什么。

我的下一个尝试是将 child 包装在一个内联函数中并从中获取 prop。

<DataCmp>
  {({ isLoggedIn}) => (
   <Fragment>
      <h1>Example Code</h1>
      <div>{isLoggedIn}</div>
   </Fragment>
  )}
</DataCmp>

虽然这不会引发任何错误； child 组件永远不会呈现。

我正在努力更新和现代化其他人的旧 Github 项目。这是 link to my project and the wrapping component is Wallet.jsx the location that it's being used is index.jsx

children 渲染如下：

renderChildren = () => {
        const { children } = this.props;
        const { accounts } = this.state;
        const handleLogin = () => this.login();
        const childrenWithProps = React.Children.map(children, (child, index) => {
            if(typeof child == 'object') {
                return React.cloneElement(child, {
                    key: index,
                    loginFn: () => handleLogin(),
                    isLoggedIn: accounts[0] !== '0x0',
                    accounts,
                });
            } else {
                return child;
            }   
        });
        return childrenWithProps;
    }

Answer 1

我想错误可能不在解构中，而是在你如何使用 childrenWithProps。

如果您共享一个表示虚拟数据问题的 condesandbox 将会很有用，这样我们也可以在那里查看该部分。

Answer 2

`React.Children.map(children, fn)` 只迭代有效的反应元素

例如，这不包括作为子函数传递的函数。将要渲染的函数作为 prop 传递给组件称为 Render Props pattern。 React.Children.map 不会对此进行迭代，因此，您的第三个选项返回 null。

先检查 children 是否是一个有效的 ReactElement 并相应地渲染它来修复它：


// wallet.tsx
...
const additionalProps = { ... };
if (React.isValidElement(children)) {
  return React.Children.map(children,
    (child, i) => React.cloneElement(child, { key: i, ...additionalProps });
} else {
  // handle null, strings, undefined, booleans etc
  return typeof children === 'function' ? children(additionalProps) : children;
}
...

// index.tsx

<Wallet ...>
  {/* either a function */}
  {(additionalProps) => console.log(additionalProps)}

  {/* or components */}
  <Layout>
    ...
  </Layout>
</Wallet>

请注意，对于 HTML-元素，React.isValidElement() 也 returns 正确。哪个会收到道具，但你显然不能添加自定义逻辑。但是假设你传递了一个 style 道具，它将被应用。

在解构 child 中处理道具

handling props in a deconstructed child

reactjs

react-props

`React.Children.map(children, fn)` 只迭代有效的反应元素

在解构 child 中处理道具

handling props in a deconstructed child

reactjs

react-props

React.Children.map(children, fn) 只迭代有效的反应元素

`React.Children.map(children, fn)` 只迭代有效的反应元素