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

Question

[maksipes]

Для отрисовки баттонов в меню приложуха делает так: каждый 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

Answer 1

[Robur]

во время выполнения App у вас еще нет информации о том, будут ли кнопки срендерены или нет. Вы просто возвращаете дескриптор виртуального дерева.
"рендерить" куда-то в переменную так себе затея.
Возможные решения
- выносить логику из врапперов куда-то выше (где вам надо использовать эту информацию). Например , где Wrapper будет просто содержать инфу об условии а фильтрацию непосредственно делать будет WrappersList, поэтому там же можно сделать что-то еще. Либо, как вариант вынести логику из компонент чтобы ее можно было использовать независимо в Wrapper и WrapperList
- соорудить что-нибудь чтобы передать состояние о том сработал враппер или нет в родительский компонент (колбеки например) и соответственно менять рендеринг в родительском компоненте. Тут главное сделать это аккуратно и без граблей

Answer 2

[abberati]

React.Children.count