请问这个：Target container is not a DOM element. 怎么解决呢？？

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div class="container"></div>
<script type="text/babel">
var ClickButton = React.createClass({
render:function () {
return(
<div>
<button>显示|隐藏</button><span>点击测试</span>
</div>
)
}
});

var TestInput = React.createClass({
getInitialState: function () {
return{
inputContent:''
}
},
render: function () {
return(
<div>
<input type="text"/><span>{this.state.inputContent}</span>
</div>
)
}
});

//ReactDOM.render(<Input/>, document.body);
ReactDOM.render(<div><ClickButton/> <TestInput/></div>,document.getElementById('container'));
</script>
</body>
</html>

墨涤

2016-09-02

源自：React入门 3-2

关注问题我要回答

29385

操作

收起

6 回答

慕粉1626556005 回答被采纳 +3 积分
2017-03-11

document.getElementById('container') 是通过id获取的,在看你的html结构是<div class="container"></div>,要不把class改成id 要不把getElementById('container')改成getElementByClassName('container')

0 回复有任何疑惑可以回复我~

收起回答

墨涤提问者

非常感谢！

2017-03-14 回复有任何疑惑可以回复我~

kevinliang
2016-09-15

感觉react比vue难学多了！

1 回复有任何疑惑可以回复我~

收起回答

kevinliang
2016-09-15

我初学时也报过好几次，报这个错误一般都是容器没写对

0 回复有任何疑惑可以回复我~

收起回答

墨涤提问者
2016-09-02

额犯了一个低级错误：用的class 渲染用的id 把这里改成id就可以了。。。

ReactDOM.render(<div><ClickButton/> <TestInput/></div>,document.getElementById('container'));

0 回复有任何疑惑可以回复我~

收起回答

墨涤提问者
2016-09-02

补充一份完整点的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div class="container"></div>
<script type="text/babel">
var TestClickComponent = React.createClass({
handleClick:function(event){
var tipE = React.findDOMNode(this.refs.tip);
if (tipE.style.display === 'none') {
tipE.style.display = 'inline';
} else {
tipE.style.display = 'none';
}
event.stopPropagation();
event.preventDefault();
},
render:function(){
return(
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
</div>
);
}
});

var TestInputComponent = React.createClass({
getInitialState:function(){
return{
inputContent:''
}
},
changeHandler:function(event){
this.setState({
inputContent:event.target.value
});
event.stopPropagation();
event.preventDefault();
},
render:function(){
return(
<div>
<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
</div>
);
}
});

ReactDOM.render(
<div>
<TestClickComponent/>
<br/><br/>
<TestInputComponent/>
</div>,
document.body);
</script>
</body>
</html>