Tôi có một thành phần reactJS đơn giản như thế này:Làm thế nào để sử dụng phản ứng linh kiện từ các tập tin khác
var LikeCon = React.createClass({
render: function() {
return (
<span>Like</span>
);
}
});
này được đặt trong một tập tin gọi là Common.jsx. Im cố gắng sử dụng thành phần LinkeCon này từ antoher tập tin jsx như thế này
var FeedTopic = React.createClass({
render: function() {
var test = false;
return (
<div className="topic">
{LikeCon}
</div>
);
}
});
Vấn đề là rằng ngoại lệ này được ném
Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined
Đây là cách nhập khẩu trông giống như trên Layoutpage
<script src="@Url.Content("~/Scripts/Common.jsx")"></script>
<script src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script src="@Url.Content("~/Scripts/Feed.jsx")"></script>
Suy nghĩ của tôi là nếu Common.jsx chứa thành phần được chia sẻ trước, thì var cũng sẽ có sẵn cho các thành phần phản ứng khác?
Edit:
này được đặt trên Layout.cshtml
<script type="text/jsx" src="@Url.Content("~/Scripts/JSXTransformer.js")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/Common.jsx")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/Feed.jsx")"></script>
Các thành phần hiện nay được giới thiệu đến với <LikeCon like="0" />
thay vì {LikeCon}
.
Chỉnh sửa 2:
Đây là cách tôi sử dụng LikeCon
var TopicComments = React.createClass({
render: function() {
var comment = this.props.data.map(function(com, i) {
return (
<article key={i}>
<div className="commentCon">
<div className="tUImgLnk">
<a title={com.UserName} target="_blank" href={com.UserInfoUrl}>
<img className="tUImg" src={com.UserPicSrc} />
</a>
</div>
<b><a href="#" title={"Visit " + com.UserName} target="_blank">{com.UserName}</a></b> :
<span className="content">
{com.Message}
</span>
<div className="status">
<div className="dateCreated dimText">
{com.DateCreated}
</div>
<LikeCon initialLike={com.Like} initialLikeCount={com.LikeCount} objectId={com.Id} categoryKey={1} userId={this.props.userId} />
<article></article>
</div>
</div>
</article>);
}.bind(this));
return(
<div className="comments">
{comment}
</div>
);
}
});
Đây là cách nhập khẩu kịch bản trông giống như
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.autosize.min.js")"></script>
<script src="@Url.Content("~/Scripts/spin.min.js")"></script>
<script src="@Url.Content("~/Scripts/JSXTransformer.js")"></script>
<script src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script src="@Url.Content("~/Scripts/Feed.jsx")"></script>
@RenderSection("ScriptFoot", required: false)
@Html.ReactInitJavaScript()
</body>
Đây là ngoại lệ tôi nhận được:
Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined at React.createClass.render (Script Document [7]:83:33) -> React.createElement(LikeCon, {initialLike: this.props.data.Like, i at Script Document [2]:7021:34 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6563:14 at wrapper (Script Document [2]:12893:21) at ReactMultiChild.Mixin.mountChildren (Script Document [2]:12352:42)
at ReactDOMComponent.Mixin._createContentMarkup (Script Document [2]:7801:32) at Script Document [2]:7723:14 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:13797:38 at Mixin.perform (Script Document [2]:16855:20) at renderToString (Script Document [2]:13795:24) at Script Document [9] [temp]:1:7 Line: 7021 Column:34
Thay vì sử dụng var, bạn có cố định nghĩa nó trên phạm vi toàn cục như 'window.LikeCon' và xem có hoạt động không? – pablolmiranda
Tôi sẽ thử điều đó nhưng tại sao không thể làm việc như toàn cầu? Theo đó, nên: http://stackoverflow.com/a/944288/365624 – Banshee
Tôi đã thử điều này: window.LikeCon = React.createClass ..và sau đó {window.LikeCon} trong tệp jsx khác nhưng nó phàn nàn về cửa sổ không xác định? – Banshee