maksipes
@maksipes

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

Для отрисовки баттонов в меню приложуха делает так: каждый Button оборачивает в Wrapper, который в зависимости от некоторых условий возвращает или нет исходный компонент Button.

Довольно удобно и красиво получается. Батоны в массиве с их враперами, которые в зависимости от роута, доступности данных или еще каких-то условий возвращают или нет баттоны, в итоге легко масштабируемое динамическое меню.

Но вот возник вопрос - как заранее узнать сколько будет отрендерено баттонов? Главное проверить на 0, есть ли хоть один баттоно?

По идее надо как-то срендерить эту конструкцию в переменную, но как?

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Wrapper>
        {({ label, icon, onClick }) => (
          <Button
            onClick={onClick}
            icon={icon}
          >
            {label}
          </Button>
        )}
      </Wrapper>
    </div>
  );
}


export class Wrapper extends React.Component {
  render() {
    const param = true;
    const { children } = this.props;

    const node = children({
      label: "Кнопка1",
      onClick: () => alert("onClick")
    });

    return Boolean(param) && node;
  }
}


export class Button extends React.Component {
  render() {
    const { onClick } = this.props;

    return <button onClick={onClick}>{this.props.children}</button>;
  }
}


Тут пример - https://codesandbox.io/s/frosty-aryabhata-1zefx
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ответы на вопрос 2
Robur
@Robur
Знаю больше чем это необходимо
во время выполнения App у вас еще нет информации о том, будут ли кнопки срендерены или нет. Вы просто возвращаете дескриптор виртуального дерева.
"рендерить" куда-то в переменную так себе затея.
Возможные решения
- выносить логику из врапперов куда-то выше (где вам надо использовать эту информацию). Например , где Wrapper будет просто содержать инфу об условии а фильтрацию непосредственно делать будет WrappersList, поэтому там же можно сделать что-то еще. Либо, как вариант вынести логику из компонент чтобы ее можно было использовать независимо в Wrapper и WrapperList
- соорудить что-нибудь чтобы передать состояние о том сработал враппер или нет в родительский компонент (колбеки например) и соответственно менять рендеринг в родительском компоненте. Тут главное сделать это аккуратно и без граблей
Ответ написан
Комментировать
@abberati
frontend-разработчик
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы