React渲染不適用於createElement

Question

我的簡單組件：

var AddProductForm = React.createClass({
    render: function(){
        return(
            <form >
                <input type='text' placeholder='lablbalbalbal'/>
            </form>
        )
    }
})

我想通過onClick“渲染”某個確定div中的第一個組件的第二個組件：

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 component = React.createElement(this.props.action.component);
        ReactDOM.render( component, document.getElementById('content'));
    }
})

當我單擊“HeaderAction”組件時，會發生錯誤：

未捕獲的不變違規：標記無效：

來自我的'組件'的console.log（）：

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

如果在渲染調用中我更改了“ <AddProductForm/> ”的“ component ”，它可以正常工作，但是在渲染之前沒有使用createElement實例化對象。

Answer 1

var 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 component = React.createElement(AddProductForm);
        ReactDOM.render( component, document.getElementById('content'));
    }
})
var mount = document.getElementById('container');
ReactDOM.render(React.createElement(HeaderAction), mount)

我沒有給你答案，但這似乎有效。 我不知道this.props.action.component在你的情況下是什么。 我創造了一個小小提琴。 也許我們可以解決這個問題。 https://jsfiddle.net/walkerrsmith/htaca7fa/