我有一种情况需要在两个不同的ID上呈现两个不同的组件。像这样:
ReactDOM.render(
<Component1/>,
document.getElementById('Coponent-id-1'));
和
var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
<Component2/>,
document.getElementById('Coponent-id-2'));
P.S这与使用a包装两个组件不同
上div
然后将其呈现在单个id
我实际上是想这样做:
ReactDOM.render((
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={WizardApp}> </Route>
<Route path="/overview" component={DealRecommendation}></Route>
<Route path="/overview/:deal" component={DealRecommendation}></Route>
<Route path="/users/invite" component={ReferralApp}></Route>
<Route path="/adm/custodian" component={CustodianApp}></Route>
</Router>
</Provider>
), document.getElementById('appRoot')
);
var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
<DealRecommendation/>,
deal_recommendations_id);
P.P.S在正常情况下,它的工作正常,如答案中所示。
就我而言,在deal_recommendations_id
加载了三个Links
(react链接)。当我点击其中任何一个时,我收到一条错误消息:
Link.js:95 Uncaught TypeError: Cannot read property 'pushState' of undefined
以下是完整代码段:
import React, { Component } from 'react';
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
// import App from './components/App';
import WizardApp from './components/WizardApp';
import DealRecommendation from './components/dealRecommendation';
import ReferralApp from './components/referral/ReferralApp';
import CustodianApp from './components/admin/custodian/CustodianApp';
import { Router, Route, IndexRoute, Link, browserHistory, hashHistory } from 'react-router'
const store = createStore(rootReducer,compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
));
ReactDOM.render((
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={WizardApp}> </Route>
<Route path="/overview" component={DealRecommendation}></Route>
<Route path="/overview/:deal" component={DealRecommendation}></Route>
<Route path="/users/invite" component={ReferralApp}></Route>
<Route path="/adm/custodian" component={CustodianApp}></Route>
</Router>
</Provider>
), document.getElementById('appRoot')
);
var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
<DealRecommendation/>,
deal_recommendations_id);
查看快照。上部div工作正常(在这种情况下,this.props.params
也会被填充)。然而,我认为甚至在定义<Routers>
之前初始化的下部div导致了我认为的问题。 (在这种情况下,this.props.params
将显示为undefined
)
------------------- DealRecommendation.js ------------------------- -----------
import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, Link, browserHistory, hashHistory } from 'react-router';
import { createHistory } from 'history';
import RouterTabs from "./dealsOfInterest/routerTabs"
import '../style/deal_recommendation.css';
export default class DealRecommendation extends React.Component{
constructor(){
super();
}
render(){
if(this.props.params!=undefined){
if(this.props.params.deal==="rec_act"){
return(
<div className="deal_data_wrapper">
<h3>Deals of Interest</h3>
<RouterTabs/>
<h2>this is activity</h2>
</div>
)
}
else if(this.props.params.deal==="deal_news"){
return(
<div className="deal_data_wrapper">
<h3>Deals of Interest</h3>
<RouterTabs/>
<h2>This is Deal_news</h2>
</div>
)
}
else{
return(
<div className="deal_data_wrapper">
<h3>Deals of Interest</h3>
<RouterTabs/>
<h2>This works too</h2>
</div>
)
}
}
else{
return(
<div className="deal_data_wrapper">
<h3>Deals of Interest</h3>
<RouterTabs/>
<h2>This doesn't work</h2>
</div>
)
}
}
}
答案 0 :(得分:1)
在一个脚本中使用两个ReactDOM.render()
完全没问题。
见下面的例子
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
var HelloAgain = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<HelloAgain name="World again" />,
document.getElementById('another-container')
);
请参阅以下文章
在你的情况下
var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
<DealRecommendation/>,
document.getElementById('deal_recommendations_id'));
deal_recommendation_id
已经是一个DOM元素而不是id,您不需要再次使用document.getElementById。使用如下
var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
<DealRecommendation/>,
deal_recommendations_id);
编辑:
据我所知,你需要删除交易推荐的冗余路线
ReactDOM.render((
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={WizardApp}> </Route>
<Route path="/overview/:deal" component={DealRecommendation}></Route>
<Route path="/users/invite" component={ReferralApp}></Route>
<Route path="/adm/custodian" component={CustodianApp}></Route>
</Router>
</Provider>
), document.getElementById('appRoot')
);
var deal_recommendations_id = document.getElementById('deal_recommendations_app');
ReactDOM.render(
<DealRecommendation/>,
deal_recommendations_id);
答案 1 :(得分:0)
这就是你追求的吗? http://codepen.io/PiotrBerebecki/pen/kkyYJv
js文件的脚本标记应放在body标记的底部(目标ID下方)。
<强> HTML:强>
<head>
<title>React JS</title>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<script src="/index.js"></script>
</body>
</html>
<强> JS:强>
class Component1 extends React.Component {
render() {
return (
<div>Hello React from Component 1</div>
);
}
}
class Component2 extends React.Component {
render() {
return (
<div>Hello React from Component 2</div>
);
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('app1')
);
ReactDOM.render(
<Component2 />,
document.getElementById('app2')
);