如何获得组件的返回值

Posted 2021-04-28

我有一些这样的代码：

import React from "react";
import "./styles.css";

const t = () => ["test1", "test2"];
const Translate = () => t("myText");

const MyComponent = ({ children }) => {
  console.log(children);
  return (
    children &&
    typeof children === "object" &&
    Array.isArray(children) &&
    children.map(val => (
      <>
        {`${val}__attached`}
        <br />
      </>
    ))
  );
};

export default function App() {
  return (
    <div className="App">
      <MyComponent>
        <Translate />
      </MyComponent>
    </div>
  );
}

检查控制台时，我打印了一个React元素。但是我想要它的返回值。

例如，如果我替换此代码：

    <MyComponent>
        <Translate />
    </MyComponent>

with

    <MyComponent>
        {t()}
    </MyComponent>

然后我得到一个在控制台上打印了2个对象的数组。我想在第一种情况下看到相同的输出。

我想要它，因为我想遍历Translate返回的值并基于该值生成输出。

谢谢。

这里是codeandbox链接：

答案

您无法实现自己想要的。确实，当您编写{t()}时，实际上是为MyComponent提供了一个数组作为子元素，因此可以map其值。

但是，一旦您写出<Translate/>，MyComponent的子项就不再是数组，而是一个React元素（可以说是html元素）（在children中打印MyComponent进行检查），从而始终进行测试假（因此它什么都不打印）

尝试在<Translate/>之外调用MyComponent，您将在页面上看到“ test1test2”。它不再是数组。

而不是写这个：

<MyComponent> 
   <Translate />
</MyComponent>

我认为您应该采取另一种方法，以便能够轻松操纵Translate中的内容并将其传递给MyComponent：

   <Translate>
      {values => <MyComponent values={values}>} 
   </Translate>

Translate为：

const Translate = ({ children }) => children(t("myText"));

和MyComponent：

const MyComponent = ({ values }) => {
  return (
    Array.isArray(values) &&
    values.map(val => (
      <>
        {`${val}__attached`}
        <br />
      </>
    ))
  );
};

实时演示here