0

All:

Im pretty new to React-motion, when I read its source(Motion.js) there is one place like:

  render: function render() {
    var renderedChildren = this.props.children(this.state.currentStyle);
    return renderedChildren && _react2['default'].Children.only(renderedChildren);
  }

I get confused about this line:

var renderedChildren = this.props.children(this.state.currentStyle);

I wonder what does this line do, does it just give those style to children? if so, where can I find the document for this usage in React website?

I also find one solution for passing props:

How to pass props to {this.props.children}

R they doing the same thing in diff ways?

Thanks

Community
  • 1
  • 1
Kuan
  • 11,149
  • 23
  • 93
  • 201
  • Your question is more about prop types while the question you reference to is about injecting props, so the two are totally not about the same things. – rishat Sep 09 '16 at 23:25

1 Answers1

1

It is because in this particular case, the only child that is passed is a function. You can see that, for example, TransitionMotion component accepts a single child which is a function, for example:

<TransitionMotion willLeave={this.willLeave} styles={styles}>
  {circles =>
    <div
      onMouseMove={this.handleMouseMove}
      onTouchMove={this.handleTouchMove}
      className="demo7">
      {circles.map(({key, style: {opacity, scale, x, y}}) =>
        <div
          key={key}
          className="demo7-ball"
          style={{
            opacity: opacity,
            scale: scale,
            transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
            WebkitTransform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
          }} />
      )}
    </div>
  }
</TransitionMotion>

and in its propTypes, children has to be a function.

But in official docs (and in a usual way), children are instances of React.createElement, represented by DOM-like syntax in JSX, and being reflected from a plain-object, because React.createElement returns a plain-object.

The case with react-motion is very rare and advanced, although you may want to use this approach at some point if you find it more suitable than simply passing children components in a classic way.

rishat
  • 8,206
  • 4
  • 44
  • 69
  • Made up [a short note](https://github.com/taxigy/til/blob/master/react/passing-custom-children.md) on that. – rishat Sep 09 '16 at 23:21
  • Thanks, so to understand this code, I have to base on its code usage example, put a function within { } between ? But I wonder why the children is not the
    element? I thought the children should be the interpreted result from that function...
     – Kuan Sep 09 '16 at 23:56
  • Ok, I get it. So the required type is determined by what inside the {}, is it correct? – Kuan Sep 10 '16 at 00:02
  • Required type is simply to throw warnings. It doesn't really do anything above that. It checks if the prop's value is of a certain type, and does `console.warn` if assertion fails. – rishat Sep 10 '16 at 08:04
  • Usually, children are either DOM elements or components, written in square brackets notation in JSX. On a lower level, these are plain-objects. Just try to call `React.createElement` anywhere on the console and see the returned value. However, if you put a function (or a string, or a number) as the only direct child, the result will be different and similar to one described in my answer (as in case of function). – rishat Sep 10 '16 at 08:06