反应组件加载问题

Question

我决定在这个周末学习 react 并且 JSFiddle 中的事情进展顺利，但是我决定添加第 4 个组件（var gooBye ...），现在视图是空的。关于可能导致这种情况的任何想法？没有错误弹出 JSFiddle React components

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

var testButton = React.createClass({
	render: function() {
  		return <button name="button">Click</button>; 
  }
});
 
 var goodBye = React.createClass({
	render: function() {
  		return <div>GoodBye</div>;
  }
});


React.render(
	<Hello name="People" />, 
	document.getElementById('myClass');
);
    
ReactDOM.render(
 	testButton(),
  document.getElementById('test2');
);
    
React.render(
   <goodBye />,
   document.getElementById('test3');
);   
    
<div id="myClass">
   </div>
 <div id="test1">
 </div>
 <div id="test2">
  </div>
  <div id="test3">  
  </div>
 <script type="text/jsx">
 			ReactDOM.render(
    	<h1>Test component in html body</h1>,
      document.getElementById('test');
    );
 </script>


</body>

Answer 1

组件名称应以大写字母开头，例如GoodBye.

当 JSX 中的元素名称以小写字母开头时，React 假定它是原生 HTML（或 SVG...）元素，例如 <div> 或 <input>。当它以大写字母开头时，它假定它是一个 React 组件，例如<Hello> 或 <GoodBye>。

var GoodBye = React.createClass({
    render: function() {
        return <div>GoodBye</div>;
    }
});

ReactDOM.render(
    <GoodBye />,
    document.getElementById('test3')
);

Answer 2

你有多个语法错误，我第二次打开你的 jsfiddle 控制台就可以看到它们：

您需要使用ReactDOM.render。 react.render 已弃用 括号中不能有最后一个分号：(<example>, asdfasdf;) 应该是 (<example>, asdfasdf)

ReactDOM.render(
    <TestButton />,
  document.getElementById('test2') // no semi-colon here!
);

您需要在组件前面有大写字母。

var TestButton = React.createClass({
    render: function() {
        return <button name="button">Click</button>; 
  }
});

这里是你的一个例子（上面的代码）的一个工作小提琴......你很接近，只是对语法非常小心。

Fiddle React