Как получить возвращаемое значение компонента - PullRequest
Новая
       49

Как получить возвращаемое значение компонента

0 голосов
/ 17 февраля 2020

У меня есть такой код: 

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>

на 

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

Затем я получу массив с двумя напечатанными объектами на консоли. Я хочу видеть этот же вывод в моем первом случае.

Я хочу это, потому что я хочу l oop через значения, возвращаемые Translate, и генерировать вывод на основе этого.

Спасибо.

Вот ссылка для кодов и ящиков:

Edit ancient-monad-5y2ur

1 Ответ

0 голосов
/ 17 февраля 2020

Вы не можете достичь того, чего хотите. Действительно, когда вы пишете {t()}, вы фактически предоставляете массив как дочерние для MyComponent и, следовательно, можете map его значения.

Однако, как только вы пишете <Translate/>, дочерние элементы MyComponent больше не является массивом, а элементом React (так сказать, элементом * 1035) (напечатайте 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 />
      </>
    ))
  );
};

Live демо здесь

...