reactjs - 如何使用函数作为子组件从组件返回变量？

Question

我希望有人能阐明这一点。使用 react Route组件给了我这个想法，但我想不通

react <Route>组件似乎渲染了 child ，但它也返回变量，例如 match .这是我正在谈论的示例:

<Route exact path="/">
  {({ match }) => (
    <div>
      {`${JSON.stringify(match)}`}
    </div>
  )}
</Route>

请注意，即使 match未在组件中的任何位置声明，该变量由 Route 返回以便 children 可以访问它。

如果我想在我自己的组件之一中执行此操作，将如何实现？

我试过这个:

const Test = (props: any): any => {
  return {
    testVariable: "test variable",
    render: (
      <>
        {props.children}
      </>
    ) 
  };
};

并且期望能够像这样使用它:

<Test>
  {({ testVariable }) => (
    <p>{testVariable}</p>
  )}
</Test>

但它现在如我所愿。

编辑:这已解决，感谢 novonimo 下面的回答。我了解到此功能的技术术语称为作为子组件的功能 (FaCC)。

这是一个有用的 tutorial在阅读 novonimo 的回答后我能够找到。

Answer 1

这非常有趣，有时与面对面有关。

我将举一个反例来向您展示如何做到这一点:

import React, {useEffect, useState} from "react";


const ChildComponent = ({children}) => {
  const [counter, setCounter] = useState(0)

  useEffect(() => {
    setInterval(() => {
      setCounter(prevState => prevState + 1)
    }, 1000)
  }, [])

  return children(new Date(), counter)
}

const ParentComponent = () => (
    <ChildComponent>
      {(startedAt, currentNumber) => (<p>started at: {startedAt} and current number is : {currentNumber}</p>)}
    </ChildComponent>
);

export default ParentComponent

试试 CodeSandbox

说明:

有两个组件，子组件和父组件。

在 ChildComponent 中，实现了一个简单的 counter。它每 1000 毫秒更改一次。

children 是用于将子项传递给组件的标准属性名称。

在ParentComponenet中，一个函数(() => {})作为children传递给ChildComponent，这是解决的关键，

到目前为止，我们将一个函数作为 children 传递给了 ChildComponent。随着 countner 变量的每次更改，ChildComponent 都会重新渲染，并且每次 children(new Date(), counter) 都会打电话。

children 函数现在每 1 秒调用一次，并导致在 ChildComponent 上重新呈现。所以在 ParentComponent 中，箭头函数(作为带有两个参数的子级传递)将每 1 秒调用一次。