Reactjs 如何获取组件'；s返回值

我有一些这样的代码：

从“React”导入React；
导入“/styles.css”；
常量t=（）=>[“test1”，“test2”]；
const Translate=（）=>t（“myText”）；
常量MyComponent=（{children}）=>{
console.log（儿童）；
返回(
孩子们&&
子对象的类型==“对象”&&
Array.isArray（子对象）&&
children.map（val=>(
{${val}{uuuu已附加`}


))
);
};
导出默认函数App（）{
返回(
);
}

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

例如，如果替换此代码：

    <MyComponent>
        <Translate />
    </MyComponent>

与

{t（）}

然后我在控制台上得到一个带有2个对象的数组。我希望在我的第一个案例中看到相同的输出

我想要它，因为我想循环通过

Translate

返回的值，并基于该值生成输出

多谢各位

以下是codesandbox链接：

---

你无法实现你想要的。实际上，当您编写

{t（）}

时，实际上为

MyComponent

提供了一个数组作为子数组，因此可以

映射其值

但是，只要您编写
，
MyComponent
的子元素就不再是数组，而是一个React元素（可以说是HTML元素）（在
MyComponent
中打印
children
以进行检查）使您的测试始终为false（因此它不会打印任何内容）

尝试在
MyComponent
之外调用
，您将看到页面上显示“test1test2”。它不再是一个数组

而不是写这封信：

<MyComponent> 
   <Translate />
</MyComponent>

Translate
为：

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


和
MyComponent
：

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

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


const MyComponent=（{values}）=>{
返回(
Array.isArray（值）&&
values.map（val=>(
{${val}{uuuu已附加`}


))
);
};

现场演示

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