                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /React.JS
                        
                        /React入門

請(qǐng)問(wèn)這個(gè)：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>點(diǎn)擊測(cè)試</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

關(guān)注問(wèn)題我要回答

29434

操作

收起

6 回答

慕粉1626556005 回答被采納 +3 積分
2017-03-11

document.getElementById('container') ?是通過(guò)id獲取的,在看你的html結(jié)構(gòu)是<div class="container"></div>,要不把class改成id 要不把getElementById('container')改成getElementByClassName('container')

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

墨滌提問(wèn)者

非常感謝！

2017-03-14 回復(fù) 有任何疑惑可以回復(fù)我~

kevinliang
2016-09-15

感覺(jué)react比vue難學(xué)多了！?

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

kevinliang
2016-09-15

我初學(xué)時(shí)也報(bào)過(guò)好幾次，報(bào)這個(gè)錯(cuò)誤一般都是容器沒(méi)寫對(duì)

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

墨滌提問(wèn)者
2016-09-02

額犯了一個(gè)低級(jí)錯(cuò)誤：用的class 渲染用的id 把這里改成id就可以了。。。

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

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

墨滌提問(wèn)者
2016-09-02

補(bǔ)充一份完整點(diǎn)的代碼：

<!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">測(cè)試點(diǎn)擊</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>