React.Children与非元素的孩子

Question

Given a component receives a function as a child ( callback as a child pattern, also known as render prop pattern):

<Foo>{() => <Bar/>}</Foo>

React.Children.count(props.children) === 0 in Foo .

The documentation doesn't seem to mention that React.Children accepts only valid React elements, so the fact that child function is ignored looks odd.

How does React.Children treat non-element children and why?

References to official sources and/or source code are welcome.

Answer 1

As others have stated, the documentation states that React.Children.count(children) only returns the count of the number of children that are valid React Components .

React.Children does not ignore other types of children, and if you need to get the count, you only need to determine the length of the array in the root child Object, just like you would in vanilla js. If you look at react-motion , you'll see that they specify that children must be type of func :

Mouse.propTypes = {
  children: PropTypes.func.isRequired
};

And they further ensure that there's only one child with React.Children.only ( docs ):

render(): ReactElement {
    const renderedChildren = this.props.children(this.state.currentStyle);
    return renderedChildren && React.Children.only(renderedChildren);
  }

React does not handle different types of children on its own, instead, you have to handle them yourself. I put together a code sandbox to show you why.

Answer 2

Update:

^{Disclaimer: It's not a solution but just an eye where we could look at.}

I'm not sure but if it is indeed needed to be fixed in React itself, then I would suggest to change in the following function:

React Element

export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}

This code:

typeof object === 'object'

To something like:

typeof Object.create(object) === 'object'

And also add a Symbol for such something like:

 Symbol.for('react.function')

in the React Symbol .

Current solution to count those children with:

this.props.children.length

This lets you count the function as child component as a children. this.props.children includes any type of element, expressions, or component whilst this.props.children inside React.Children function as child is being ignored as children. Continue reading bellow to understand it better...

Here's a demo .

---

React doesn't consider function as child component as CHILDREN.

However, I have just submitted an issue and if you wish you can keep following there .

The docs specifies that the React.Children.count only counts the component in children.

You probably already have known what exactly is children in react .

React takes everything as children except the function as child.

Here's the reference where it states:

React components don't support functions as children.

If you wish you can look deeper here .

So, you have function as a child in <Foo /> component so it does return 0 as it's not being considered as children.

You can optionally count those expressions as its children then you may convert them to array first and then count like:

class CountExpression extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    return <p>{React.Children.count(children)}</p>
  }
}

{ /* Counts 2 */ }
<CountExpression>
  {'one'}
  {'two'}
  { () => <p>Still, this will be ignored as child and is not included in array</p>}
</CountExpression>

Here's a draft demo if you want to have a look.

More on using children...

Look at the following example how children is being counted:

class CountChildren extends React.Component {
  render() {
    return <p>{React.Children.count(this.props.children)}</p>
  }
}

{ /* Renders 1 */ }
<CountChildren>
  Simply a text!
</CountChildren>

{ /* Renders 2 */ }
<CountChildren>
  <p>Html element</p>
  <ChildComponent />
</CountChildren>

{ /* Renders 3 */ }
<CountChildren>
  Simply a text!
  <p>Html element</p>
  <ChildComponent />
</CountChildren>

{ /* Renders 3 */ }
<CountChildren>
  Simply a text!
  <p>Html element</p>
  <ChildComponent />
  { /* ignores it as it's not a component */ }
  { () => <div>Function as a child component</div> }
</CountChildren>

So, you can notice that React can accept any type of children regardless of array, a function, or an object, etc.

If you wish you can also ignore rendering the children checking it with a condition. For eg.:

class SingleChildComponent extends React.Component {
  render() {
    return (
      <div>
        {
          Array.isArray(this.props.children) ?
            'Sorry, you can only pass single child!' :
            this.props.children()
        }
       </div>
    )
  }
}

{ /* Renders 'Sorry, you can only pass single child!' */ }
<SingleChildComponent>
  <p>First children</p>
  <SecondChildren />
</SingleChildComponent>

{ /* Renders `<p>Single child</p>` */ }
<SingleChildComponent>
  <p>Single child</p>
</SingleChildComponent>

If you wish, you can convert the children to array and sort it out like below:

class SortComponent extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    return <>{ children.sort().join(', ') }</>
  }
}

{ /* Renders 'Computer, Furniture, Machine' */ }
<SortComponent>
  {'Machine'} { /* First child */ }
  {'Computer'} { /* Second child */ }
  {'Furniture'} { /* Third child */ }
</SortComponent>

Enforcing a single child:

Bad:

class OnlyChildComponent extends React.Component {
  render() {
    return this.props.children()
  }
}

{ /* Enforcing it as a single child component */ }
OnlyChildComponent.propTypes = {
  children: React.PropTypes.func.isRequired
}

If there are more children, then it just shows warning in the console and let the program execute next.

Good:

class OnlyChildComponent extends React.Component {
  render() {
    return React.Children.only(this.props.children)()
  }
}

If there are more than one child, then it will throw an error! And it halts the program execution. It's perfect to avoid mess with our component.

Answer 3

According to the docs :

React.Children.count returns the total number of components in children, equal to the number of times that a callback passed to map or forEach would be invoked.

What the above statement means is that if the children element passed to a component is iteratable then only the count will be incremented.

---

Now lets look at the code snippet that React internally used to calculate count.

React.children.count uses the following code

The major piece of code is

function traverseAllChildren(children, callback, traverseContext) {
  if (children == null) {
    return 0;
  }

  return traverseAllChildrenImpl(children, '', callback, traverseContext);
}

So if children is null , it returns 0.

function traverseAllChildrenImpl( children, nameSoFar, callback, traverseContext, ) { ...

    switch (type) {
      case 'string':
      case 'number':
        invokeCallback = true;
        break;
      case 'object':
        switch (children.$$typeof) {
          case REACT_ELEMENT_TYPE:
          case REACT_PORTAL_TYPE:
            invokeCallback = true;
        }
    }
  }

  if (invokeCallback) {
    // Other code
    return 1;
  }

So from the above code we infer that we children is String , Number it will return 1 ;

Moving on to the next part

if (Array.isArray(children)) {
    for (let i = 0; i < children.length; i++) {
      child = children[i];
      nextName = nextNamePrefix + getComponentKey(child, i);
      subtreeCount += traverseAllChildrenImpl(
        child,
        nextName,
        callback,
        traverseContext,
      );
    }
  }

It implies that for each element within the children array, the count is incremented.

const iteratorFn = getIteratorFn(children);
if (typeof iteratorFn === 'function') {

For functions provided as children which are iteratable such as Maps, Sequence it will iterate though the elements and calculate the subtree count

For an object it will return an error.

invariant(
    false,
    'Objects are not valid as a React child (found: %s).%s',
    childrenString === '[object Object]'
      ? 'object with keys {' + Object.keys(children).join(', ') + '}'
      : childrenString,
    addendum,
  );

A demo for the above piece of information is in the codesandbox here

Answer 4

TLDR

From the official doc :

React.Children provides utilities for dealing with the this.props.children opaque data structure.

In other words, the React.Children namespace is full of utility functions that are helpful when using this.props.children for its primary intended purpose within the composition model .

The composition model uses the special children property for things that can be rendered directly into the output of a parent component , so utility functions like React.children.count are programmed to only include things that can be directly rendered .

Because a function cannot be directly rendered into the output of a parent component, it is not included in the results from React.Children.count .

---

What is the children prop?

The children prop is a special prop that React uses to pass a component its children .

As I'm sure you know, JSX is just syntactic sugar for React.createElement .

The call signature for React.createElement looks like this:

React.createElement(type, props, ...children)

So when a component is passed children in JSX like this:

<Foo>
  <div>child1</div>
  <div>child2</div>
</Foo>

...it results in this code:

React.createElement(Foo, null,
  React.createElement("div", null, "child1"),
  React.createElement("div", null, "child2")
);

...where the children are passed as the trailing arguments and are available in the component as the special children prop.

---

What is the children prop for?

The children prop is a special prop used for component composition .

From the Composition vs Inheritance doc :

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

...and later:

We recommend that such components use the special children prop to pass children elements directly into their output

So the composition model uses the special children prop to allow for reusable components:

// Renders its children within a container div with class "foo":
const Foo = (props) => (<div className="foo">{props.children}</div>);

---

What can be passed in the children prop?

Well...anything. There are no actual restrictions on what can be passed in the children prop...

...but only certain things can be passed to a component using children for the composition model and expecting to render the child "directly into their output".

So this is valid:

<Foo>some text</Foo>

...and this is valid:

<Foo><div>something</div></Foo>

...and even this is valid:

<Foo>
  <Foo>
    some text
  </Foo>
</Foo>

...but this is not valid:

<Foo>{() => 'some text'}</Foo>

...since Foo cannot render a function directly into its output.

---

Why are functions ever passed as children?

As you pointed out, this is the result of the Render Props pattern.

In the doc describing the Render Props pattern it starts with passing a render function as a render prop .

Then it points out that using a prop named render is completely arbitrary and the prop name could be anything ...

...and it ends by pointing out that:

we could just as easily use the children prop!

...and showing how a render function could be passed in as the children prop.

But then it includes this warning:

Since this technique is a little unusual, you'll probably want to explicitly state that children should be a function in your propTypes when designing an API like this.

In other words, this is a non-standard use of the special children prop.

---

Passing something arbitrary as children

As I noted earlier, anything can be passed as children .

So taking it a step further, here is a component that expects an Object containing three functions, header , body , and footer :

const ExpectsObject = (props) => (
  <div>
    {props.children.header()}
    {props.children.body()}
    {props.children.footer()}
  </div>
);

This highly unusual component would be used like this:

<ExpectsObject>
  {{
    header: () => (<div>header</div>),
    body: () => (<div>body</div>),
    footer: () => (<div>footer</div>)
  }}
</ExpectsObject>

...and this works just fine.

But again, this is a very non-standard use of the special children property and would require careful documentation, and since this approach does not follow the composition model the utility functions in the React.Children namespace don't know how to handle the custom object in children .

In fact, calling React.Children.count with this particular object as children causes the utility function to throw an error.

---

Why does React.Children.count not count a function?

So why is a function not included in the count returned by React.Children.count ?

React.Children.count is designed to be a utility method for the composition model and associated use of the special children property.

Because a function cannot be rendered directly into the output of a component following the composition model, it is not included in the count returned by React.Children.count .