admin管理员组文章数量:1330417
My simple ponent:
var AddProductForm = React.createClass({
render: function(){
return(
<form >
<input type='text' placeholder='lablbalbalbal'/>
</form>
)
}
})
My second ponent that I want to 'render' the first ponent in some determined div via onClick:
var HeaderAction = React.createClass({
render: function(){
return(
<button type="button" onClick={this.handleClick} className="btn border-slate text-slate-800 btn-flat"><i className={this.props.icon + " position-left"}></i>{this.props.name}</button>
)
},
handleClick: function(){
var ponent = React.createElement(this.props.actionponent);
ReactDOM.render( ponent, document.getElementById('content'));
}
})
When I click my 'HeaderAction' ponent, an error occurs:
Uncaught Invariant Violation: Invalid tag:
The console.log() from my 'ponent' :
Object {$$typeof: Symbol(react.element), type: "<AddProductForm/>", key: null, ref: null, props: Object…}
$$typeof: Symbol(react.element)
_owner: null
_self: null
_source: null
_store: Object
key: null
props: Object
ref: null
type: "<AddProductForm/>"
__proto__: Object
If in the render call I change 'ponent
' for "<AddProductForm/>
" it works fine, but using the createElement for instantiate the object before the render doesn't.
My simple ponent:
var AddProductForm = React.createClass({
render: function(){
return(
<form >
<input type='text' placeholder='lablbalbalbal'/>
</form>
)
}
})
My second ponent that I want to 'render' the first ponent in some determined div via onClick:
var HeaderAction = React.createClass({
render: function(){
return(
<button type="button" onClick={this.handleClick} className="btn border-slate text-slate-800 btn-flat"><i className={this.props.icon + " position-left"}></i>{this.props.name}</button>
)
},
handleClick: function(){
var ponent = React.createElement(this.props.action.ponent);
ReactDOM.render( ponent, document.getElementById('content'));
}
})
When I click my 'HeaderAction' ponent, an error occurs:
Uncaught Invariant Violation: Invalid tag:
The console.log() from my 'ponent' :
Object {$$typeof: Symbol(react.element), type: "<AddProductForm/>", key: null, ref: null, props: Object…}
$$typeof: Symbol(react.element)
_owner: null
_self: null
_source: null
_store: Object
key: null
props: Object
ref: null
type: "<AddProductForm/>"
__proto__: Object
If in the render call I change 'ponent
' for "<AddProductForm/>
" it works fine, but using the createElement for instantiate the object before the render doesn't.
-
What is
this.props.action.ponent
? At the time the render fails? – Cooper Buckingham Commented Feb 11, 2016 at 23:54 - this.props.action.ponent resolves to a string, no fails. – Pavarine Commented Feb 12, 2016 at 1:21
1 Answer
Reset to default 4var AddProductForm = React.createClass({
render: function(){
return(
<form >
<input type='text' placeholder='lablbalbalbal'/>
</form>
)
}
})
var HeaderAction = React.createClass({
render: function(){
return(
<button type="button" onClick={this.handleClick}</button>
)
},
handleClick: function(){
var ponent = React.createElement(AddProductForm);
ReactDOM.render( ponent, document.getElementById('content'));
}
})
var mount = document.getElementById('container');
ReactDOM.render(React.createElement(HeaderAction), mount)
I do not have an answer for you, however this seems to work. I do not know what this.props.action.ponent
is in your case. I have created a small fiddle. Maybe we can work this out. https://jsfiddle/walkerrsmith/htaca7fa/
本文标签: javascriptReact render not working with createElementStack Overflow
版权声明:本文标题:javascript - React render not working with createElement - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742261641a2442622.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论