在两个不同的ID上渲染两个组件 - 反应

Question

我有一种情况，我需要在两个不同的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 This is different scenario than wrapping two component with a div and then rendering it on a single 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="https://stackoverflow.com/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); 

PPS在正常工作的情况下正常如图所示，答案。 在我的情况下，在deal_recommendations_id三个Links（反应链接）加载。当我点击任何这些，我得到一个错误信息：

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="https://stackoverflow.com/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); 

看到的快照。上部分工作正常（在这种情况下，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> 
     ) 
    } 

    } 
} 

Answer 1

这是你在做什么？ 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') 
); 

Answer 2

这是完全正常使用两个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') 
); 

JSFIDDLE

见例如参考以下文章

React Forum，SO POST

在你的情况

var deal_recommendations_id = document.getElementById('deal_recommendations_app'); 
ReactDOM.render(
<DealRecommendation/>, 
document.getElementById('deal_recommendations_id')); 

deal_recommendation_id已经是一个DOM元素，而不是一个你不需要再使用document.getElementById的id。使用它像下面

var deal_recommendations_id = document.getElementById('deal_recommendations_app'); 
ReactDOM.render(
<DealRecommendation/>, 
deal_recommendations_id); 

编辑：

至于我可以看到你需要删除的dealrecommendation的冗余路由

ReactDOM.render((
    <Provider store={store}> 
     <Router history={hashHistory}> 
      <Route path="/" component={WizardApp}> </Route> 
      <Route path="/overview/:deal" component={DealRecommendation}></Route>   
      <Route path="https://stackoverflow.com/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);