Question

现在我不使用 JSX （有几个原因）

我可以使用 React.createElement

正常工作

e.g。

var ui =
    React.createElement('div', {},
        React.createElement('h1', {}, "Contacts"),
        React.createElement('ul', {},
            React.createElement('li', {},
                React.createElement('h2', {}, "James Nelson"),
                React.createElement('a', { href: 'mailto:james@json.com' }, 'james@json.com')
            ),
            React.createElement('li', {},
                React.createElement('h2', {}, "Joe Citizen"),
                React.createElement('a', { href: 'mailto:joe@example.com' }, 'joe@example.com')
            )
        )
    );

React.render(ui, document.getElementById('react-app'));

但是，我开始阅读并了解 createClass ，但我收到错误

react-with-addons.min.js:20302 Uncaught Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

以下是我的示例代码，其中我只是尝试设置变量＆＃34; x＆＃34;到html，然后在渲染中使用它：返回 x

这有什么问题？

var x = "<div><select id='lang' onChange={this.change} value={this.state.value}>";
x = x + "<option value='select'>Select</option>";
x = x + "<option value='Java'>Java</option>";
x = x + "</select><p></p><p>{this.state.value}</p></div>";



var MySelect = React.createClass({

    change: function(event){
        this.setState({value: event.target.value});
    },
    render: function(){
            return(
                    x
                );
    }
});

React.render(MySelect, document.getElementById('react-main'));

最终我的目标是创建一个下拉列表，其中onchange将使用反应来显示/隐藏其他元素（文本框等...）问题与答案类型....

更新

我确实在项目中看到了各种React

这个代码是有人写的，我认为它是＆＃34;工作＆＃34;

SS.OpportunityDetailsGraph= React.createClass({displayName: "OpportunityDetailsGraph",

componentDidMount: function(){
    advisorDataManager.getOpportunityExceptionChart(this.props.opportunity.guid).done(this.renderChart);
},

renderChart:function(html){
    var content = $(this.getDOMNode()).find("#opportunity-details");
    content.html("").append(html).hide().fadeIn("slow");

},

render: function() {
    return (
    React.createElement("div", {className: "chart"}, 
                 React.createElement("div", {className: "ibox float-e-margins"}, 
                     React.createElement("div", {className: "ibox-content"}, 
                         React.createElement("div", {id: "opportunity-details"}, 
                             React.createElement(SS.Loader, null)
                         )
                     )
                 )
             )
        );
}
});

使用React.createClass反应js无效的组件元素

0 个答案: