Is there a JSX equivalent to this.props.children?

[MattMcFarland]

Hi,

I've switched from React to Mithril, and MSX has been really great. With JSX, you can invoke {this.props.children} to render child components that can be between an opening and closing tag.

<MyComponent>
    <MyHeader>{this.props.heading}</MyHeader>
    <SomeContent>
        <AnotherCustomComponent/>
        <AnotherComponent>
            <ReallyNestedNow/>
        </AnotherComponent>
    </SomeContent>
</MyComponent>

So how does it work?

SomeContent () {
    render () {
        <div>
            <header>
                <h4>Lorem Ipsum</h4>
            </header>
            {this.props.children} 
            // In this example, it would render every component inbetween the opening and closing <SomeContent> tag as seen above.
            <footer>Lalalalalal</footer>
        </div>
    }
}

This makes working with JSX very easy, especially when running into situations where it makes more sense to enclose a component this way.

I'm running into a sitaution with Mithril where I want to do this, but it is not working. Is there any alternative?

Thanks!! Matt

[insin]

MSX will bundle any child contents into an array which is passed as the third argument to a Mithril component's view function, so something like this should work:

var SomeContent = {
  view(ctrl, props, children) {
    <div>
      <header>
        <h4>Lorem Ipsum</h4>
      </header>
      {children} 
      <footer>Lalalalalal</footer>
    </div>
  }
}

Note that MSX will be deprecated as soon as the next version of Mithril is released, as a change has been made which allows you to make full use of Babel's JSX transpiler instead. Babel will pass any children as additional arguments, so you'd need to use this signature instead to put children into an array.

view(ctrl, props, ...children)

[MattMcFarland]

Thanks for your reply. It is good to know that we can use babel as well. I am currently building my application with browserify, and I tried babelify but it made everything look like react. So I'm using mithrilify right now.

Question, why do you have view(ctrl, props, children) - why not (ctrl, children) ??? where do props come in??

[stephenwf]

They are when using the component itself. So using the example above:

var SomeOtherComponent = {
  view(ctrl, props, children) {
    return <div>
      <SomeComponent someproperty="some value">
        <input type="text" />
      </SomeComponent>
    </div>
  }
}

Now props.someproperty can be used in "SomeComponent". Just from the logical order that they are used I guess is the reason.

[dead-claudia]

By the way, the details of resolving this for Babel compatibility is still in the works.