反应和引导：组件不渲染
Posted
技术标签:
【中文标题】反应和引导：组件不渲染【英文标题】：React and bootstrap: component not rendering 【发布时间】：2017-10-11 08:36:28 【问题描述】：我正在尝试使用 react 渲染简单的引导组件。
这是 index.html：
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<meta charset="utf-8">
<title>To Do List</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="headContainer">
<div class="row">
<div class="col-sm-1">
<img src="Panter.jpg" class="img-responsive">
</div>
<div class="col-sm-8">
<h1 style="color:Pink">To do, to do, to doooo</h1>
</div>
</div>
<div id="list">
</div>
</div>
<script type="text/babel" src="js/app.js" ></script>
</body>
</html>这是 app.js：
var ListOfActionsRendering=React.createClass(
render: function()
return (
<div class="accordion" id="listOfActions">
<div class="accordion-group">
<div class="row">
<div class="col-sm-2">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList">
<h4 id="nameOfGroup"> Основной список </h4>
</a>
</div>
<div class="col-sm-2">
<div class="btn-group">
<button class="btn" onclick="onEditListOfActionClick()"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</div>
<div class="accordion-body collapse in" id="defaultList">
<div class="accordion-inner">
<a href="#defaultList">
<h5> </h5>
</a>
</div>
</div>
</div>
);
);
ReactDOM.render (
<ListOfActionsRendering />,
document.getElementById("list")
);我在 chrome 控制台中没有任何错误，但未显示组件。
在 snipper 中我有一个错误：
消息：未捕获的语法错误：意外的令牌 http://stacksnippets.net/js, 线号：16， 科诺：6
【问题讨论】：
【参考方案1】：您需要包含babel standalone 脚本，要转译代码，请在head 部分使用此脚本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
检查工作示例：
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<meta charset="utf-8">
<title>To Do List</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="headContainer">
<div class="row">
<div class="col-sm-1">
<img src="Panter.jpg" class="img-responsive">
</div>
<div class="col-sm-8">
<h1 style="color:Pink">To do, to do, to doooo</h1>
</div>
</div>
<div id="list">
</div>
</div>
<script type="text/babel" >
var App = React.createClass(
render: function()
return <p>Hello</p>
)
ReactDOM.render(<App/>, document.getElementById('list'))
</script>
</body>
</html>【讨论】：
【参考方案2】：在 JSX 中，只需将 class="" 更改为 className=""：
var ListOfActionsRendering=React.createClass(
render: function()
return (
<div className="accordion" id="listOfActions">
<div className="accordion-group">
<div className="row">
<div className="col-sm-2">
<a className="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList">
<h4 id="nameOfGroup"> Основной список </h4>
</a>
</div>
<div className="col-sm-2">
<div className="btn-group">
<button className="btn" onclick="onEditListOfActionClick()"><i className="glyphicon glyphicon-pencil"></i></button>
<button className="btn"><i className="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</div>
<div className="accordion-body collapse in" id="defaultList">
<div className="accordion-inner">
<a href="#defaultList">
<h5> </h5>
</a>
</div>
</div>
</div>
);
);
【讨论】：
不客气，如果您认为我的回答有用，也请考虑投票，谢谢！如果您对 reactjs 有进一步的问题，可以告诉我，如果可以，我会尽力提供帮助！以上是关于反应和引导：组件不渲染的主要内容，如果未能解决你的问题，请参考以下文章