MENU

React.X

React.createElement(component React.createElement(component React.createElement(component [ [ [ , props , props , props [ [ [ , ...children , ...children , ...children ]] ]] ]] ) ) )

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.

1)

<MyButton color="blue" shadowSize={2}>
  Click Me</MyButton>

<MyButton color="blue" shadowSize={2}>
  Click Me</MyButton>

compiles into:

2)

<div className="sidebar" />

<div className="sidebar" />

compiles into:

React.cloneElement(element [,config [, ...children]]) React.cloneElement(element [,config [, ...children]]) React.cloneElement(element [,config [, ...children]])

This clones and returns a new React element using 'element' as the starting point. 'config' should contain all new props, key, or ref. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. 'key' and 'ref' from the original element will be preserved if no key and ref present in the config. It is almost equivalent to:

<element.type {...element.props} {...props}>{children}</element.type>

<element.type {...element.props} {...props}>{children}</element.type>

However, it also preserves refs. This means that if you get a child with a ref on it, you won't accidentally steal it from your ancestor. You will get the same ref attached to your new element. The new ref or key will replace old ones if present.

React. React. React. isValidElement( isValidElement( isValidElement( object object object ) ) )

This verifies the object is a React element, returning true or false.

React.Children React.Children React.Children

This provides utilities for dealing with this.props.children.

React.Children.map(children, function[(thisArg)])

Invokes a function on every immediate immediate immediate child contained within children with this set to thisArg. If 'children' is an array it will be traversed and the function will be called for each child in the array. If 'children' is null or undefined, this method will return null or undefined rather than an array. If 'children' is a Fragment it will be treated as a single child and not traversed.

const OpaqueWrapper = ({ children }) => (
            React.Children.map(children, child => (
       <Wrapper>
           {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
       </Wrapper>
    ))));

const OpaqueWrapper = ({ children }) => (
            React.Children.map(children, child => (
       <Wrapper>
           {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
       </Wrapper>
    ))));

React.Children.forEach(children, function[(thisArg)])

Like React.Children.map() but does not return an array.

React.Children.count(children)

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.

React.Children.only(children)

Verifies that 'children' has only one child (a React element) and returns it. Otherwise, this method throws an error.

React.Children.toArray(children)

Returns the 'children' opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down. It changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, toArray() prefixes each key in the returned array so that each element's key is scoped to the input array containing it.

Though identical, Children.map() is more performant than Children.toArray().map().Below, Children.toArray(children) skips ‘null’ or ‘undefined’ and the length of the result will be 1. However, Children.map(children, x => x) also iterates with null, and the length will be 2.

Though identical, Children.map() is more performant than Children.toArray().map().Below, Children.toArray(children) skips ‘null’ or ‘undefined’ and the length of the result will be 1. However, Children.map(children, x => x) also iterates with null, and the length will be 2.

<ReactComponent>
   <div>one</div>
   { null }</ReactComponent>

<ReactComponent>
   <div>one</div>
   { null }</ReactComponent>