从这里:
"在React之外获取React Component实例句柄的唯一方法是存储React.render的返回值."
我需要在React之外渲染一个React组件,我将在下面提到它的原因.
在我的node.js,expressJS应用程序中,我使用'react-router-component'和'react-async'.
在app.js中 - 应该运行的文件,
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);
});
});
在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 …
我正在尝试使用使用大量jQuery的布局/模板的项目。
我已经学会了将模板与ReactJS Project集成在一起，但是，我正在寻找一种可以完全替代jQuery的解决方案。
我的解决方案之一是在内部使用jQuery函数ComponentDidMount()或Render()React函数。
这种方法正确吗？这是正确的方法吗？
我在下面附上一个小例子：
import React, { Component } from 'react';
import '../stylesheets/commonstyles.css';
import '../stylesheets/bootstrap-sidebar.css';
import '../stylesheets/sidebar1.css';
import $ from 'jquery';
class NavBar extends Component {
constructor(props){
super(props);
this.openSidebar = this.openSidebar.bind(this);
}
openSidebar(){
console.log('hello sidebar');
}
componentWillMount(){
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
$('.search-btn').on("click", function () {
$('.search').toggleClass("search-open");
return false;
});
});
}
这是我的Render职能。
{/* <!--- SIDEBAR -------> */}
<div class="wrapper" style={{paddingTop:60}}>
{/* <!-- Sidebar Holder --> */ } …