React.createElement' children 파라미터 사용방법(jsx 없음)

React.createElement' children 파라미터 사용방법(jsx 없음)

React.createElementspread "children" 매개 변수를 사용합니다.

var d = React.DOM;

React.createElement(LabeledElement, {label: "Foo"}, 
     d.input({value: "foo"})
)

실제로 사용하는 방법에 대한 문서를 찾을 수 없습니다.

var LabeledElement = React.createClass({
    render: function() {
        return d.label({}
            ,d.span({classNames: 'label'}, this.props.label)
            , //How to place children here? 
    }
})

이 질문에 대한 답은 아주 간단할 겁니다.

자식은 JSX 네스트 또는 세 번째+ 인수를 통해 컴포넌트에 전달되었습니다.React.createElement는 컴포넌트에 다음과 같이 표시됩니다.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"})
      )
    );
  }
});

예: http://jsfiddle.net/BinaryMuse/typ1f2mf/; 문서:http://facebook.github.io/react/docs/multiple-components.html#children

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
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"})
      )
    );
  }
});

언급URL : https://stackoverflow.com/questions/30195720/how-to-use-react-createelement-children-parameter-without-jsx