以两个不同的 id 渲染两个组件 - React

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 这与用一个包装两个组件不同的场景 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 Links)。当我点击其中任何一个时，我会收到一条错误消息：

Link.js:95 Uncaught TypeError: Cannot read property 'pushState' of undefined

这是完整的sn-p：

   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>
        )  
    }

  }
}

Answer 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')
);

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 元素，而不是一个 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);

Answer 2

这就是你所追求的吗？ http://codepen.io/PiotrBerebecki/pen/kkyYJv

你的 js 文件的 script 标签应该放在 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')
);