Từ here:Render một thành phần từ ReactJS ngoài
"Cách duy nhất để có được một xử lý cho một Phản ứng dụ Component ngoài Phản ứng là bằng cách lưu trữ các giá trị trở lại của React.render."
tôi cần phải làm cho một bộ phận Phản ứng bên ngoài Phản ứng và lý do cho nó tôi sẽ đề cập dưới đây.
Trong ứng dụng của tôi node.js, expressJS, tôi đang sử dụng 'react-router-component' và 'react-async'.
Trong app.js -the tập tin đó là nghĩa vụ phải được chạy,
var url=require('url');
var App=require('./react/App.jsx');
var app = express();
app.get('*',function(req,res){
//}); SEE EDIT 1 BELOW
var path = url.parse(req.url).pathname;
ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) {
res.send('<!DOCTYPE html>'+markup);
});
});
Trong App.jsx,
PostList = require('./components/PostList.jsx');
var App = React.createClass({
render: function() {
return (
<html>
<head lang="en">
</head>
<body>
<div id="main">
<Locations path={this.props.path}>
<Location path="/" handler={PostList} />
<Location path="/admin" handler={Admin} />
</Locations>
<script type="text/javascript" src="/scripts/react/bundle.js"></script>
<script type="text/javascript" src="/scripts/custom.js"></script>
</body>
</html>
});
bundle.js là file browserified từ tất cả các .jsx tập tin.
Trong PostList.jsx,
var PostList = React.createClass({
mixins: [ReactAsync.Mixin],
getInitialStateAsync: function(cb) {
if(typeof this.props.prods==='undefined'){
request.get('http://localhost:8000/api/cats_default', function(response) {
cb(null, {items_show:response.body});
});
}
},
setTopmostParentState: function(items_show){
this.setState({
items_show:items_show
});
},
render: function() {
return (
<div className="postList" id="postList">
**// Things go here**
<div className="click_me" >Click me</div>
</div>
}
});
PostListRender=function(cart_prods){
var renderNow=function(){
//return <PostList cart_prods={cart_prods}></PostList>
React.renderComponent(<PostList cart_prods={cart_prods}></PostList>,document.getElementById('postList'));
};
return {
renderNow:renderNow
}
};
module.exports=PostList;
Trong custom.js:
$('.click_me').click(function(){
PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();
$('odometer').html('price');// price variable is calculated anyhow
});
Trang lãm tốt.
EDIT 3 Bắt đầu
Bây giờ tôi muốn làm cho thành phần PostList trên cách nhấn vào click_me div.
EDIT 3 Kết thúc
Nhưng khi tôi bấm vào các yếu tố click_me, trình duyệt cho thấy kịch bản bận rộn, giao diện điều khiển cho thấy
ReactJS - ReactMount: yếu tố gốc đã bị xóa khỏi thùng chứa ban đầu của nó. Vùng chứa mới
Và giới hạn nhật ký Firebug vượt quá.
Vậy tại sao tôi muốn hiển thị trên nhấp chuột từ bên ngoài react.js: tôi phải chạy plugin jQuery Odomoeter trên cách nhấn vào click_me div. Plugin không được phát triển như là một nút trung gian mặc dù nó có thể được cài đặt theo cách một phần mềm trung gian được cài đặt và các codebase plugin được lưu bên trong thư mục node_modules.
Edit2 Bắt đầu:
Như các plugin không phải là một middleware nút, tôi không thể require nó từ nút ở bên trong.Tuy nhiên tôi có thể thực hiện sự kiện click (mã không hiển thị) từ bên trong nút và chạy đoạn mã sau đó là tốt:
$('odometer').html('price');// price variable is calculated anyhow
Trong trường hợp này tôi bao gồm các plugin trong trình duyệt với <script /> thẻ và browserified bundle.js đến sau tập lệnh plugin. Nhưng hoạt ảnh không được hiển thị đúng cách. Vì vậy, tôi thực hiện sự kiện nhấp chuột phía máy khách trong số custom.js.
Nếu tôi không
require plugin là một trung gian từ bên trong nút và chỉ bao gồm nó trong trang trước khi các tập tin JS browserified và thực hiện các sự kiện nhấp chuột bên trong Phản ứng, sau đó các hình ảnh động odometer là không được hiển thị đúng cách .
Edit2 Kết thúc:
Vì vậy, các cách để làm cho PostList Phản ứng thành phần bên ngoài Phản ứng là gì?
EDIT 1 Các }); được khá nhầm lẫn đặt ở đó
Khá khó để nói những gì bạn đang yêu cầu/cố gắng làm ở đây và tôi nghĩ có thể có một số vấn đề sao chép/dán vì mã không hợp lệ như được viết. Bạn có dự án JSFiddle, GitHub hoặc một số ví dụ thực sự hoạt động khác (hoặc không hoàn toàn hoạt động) không? –
@BrandonTilley, tôi chỉ dán phần liên quan ở đây. Tuy nhiên, tôi chỉ cần logic. Bạn tìm thấy vấn đề gì? –
@BrandonTilley, Trang hiển thị trong trình duyệt như mong đợi. Bây giờ khi nhấp vào một 'div' trong trang từ phía máy khách React, tôi muốn kết xuất lại trang. Đây là tất cả những gì tôi muốn làm. Sự kiện 'click' sẽ diễn ra từ phía máy khách. Lý do tại sao tôi không kích hoạt 'click' từ bên trong React là tôi phải chạy một plugin jQuery cụ thể là thước đo trên mỗi lần nhấp và nếu tôi kích hoạt nó từ bên trong React ở phía máy chủ, tôi không thể chạy plugin đúng cách có như là các plugin không phải là một middleware nút. Còn gì nữa để giải thích không? –