Menu
React.createElement takes a spread "children" parameter
var d = React.DOM; React.createElement(LabeledElement, {label: "Foo"}, d.input({value: "foo"}) ) but I can't find any documentation on how to actually use it
var LabeledElement = React.createClass({ render: function() { return d.label({} ,d.span({classNames: 'label'}, this.props.label) , //How to place children here? } }) I'm sure this has a really really simple answer.
892
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.
Children are props If you want to pass things to this button, you would use a prop. If you want to make our button say more than just "I am a button," you can pass children to it. By passing children in this way, you are passing it to the component by position.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements.
The children passed to a component, either via JSX nesting or via the third+ argument to React.createElement, shows up in the component as this.props.children:
var MyLabel = React.createClass({ render: function() { return React.createElement("label", {className: "label"}, React.createElement("span", {className: "label"}, this.props.label), this.props.children ); } }); var App = React.createClass({ render: function() { return React.createElement(MyLabel, {label: "Here is the label prop"}, React.createElement("div", {}, React.createElement("input", {type: "text", value: "And here is a child"}) ) ); } }); Example: http://jsfiddle.net/BinaryMuse/typ1f2mf/; docs: http://facebook.github.io/react/docs/multiple-components.html#children
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
