javascript - React - 父组件将子组件渲染到不同的元素/节点

Question

我已经用普通的旧式 HTML+SASS 构建了一个网站，我想添加一些 React 来处理该网站的主要内容。我在左列中有一个内部链接列表，在右列中显示不同的内容(非常像选项卡)。

查看各种文章，似乎我应该有一个管理状态(可能是 state.currentTab)的父组件来控制应呈现哪些主要内容。

我的问题是我需要父组件将左侧链接和右侧内容渲染到不同的元素。我似乎不知道如何做到这一点。

我从下面可以看到，实际上什么都不会渲染，因为两个 ReactDom.render() 都在 myParent 中，而永远不会被调用。但我的问题似乎是我需要调用/渲染其中的两个左右列，以便能够将状态更新传递给每个列，以便我可以控制内容。如果它们位于父组件之外的 App.js 文件的底部，我认为我无法做到这一点。

我确信我在下面的代码中犯了一些错误，但希望它足够清楚地解释了我想要做的事情。

所以项目可能看起来像这样:

index.html

body
  .container
    #leftCol <!-- render links to this element -->
    #rightCol <!-- render content to this element -->

App.js

class myParent extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        currentTab: 0
       }
     }
     ReactDOM.render(<Conference currentTab="this.state.currentTab" />,document.getElementById('rightCol'));
     ReactDOM.render(<TabMenu />,document.getElementById('leftCol'));
}

class rightCol extends React.Component {
  render(){
    return(
      <div>right col mark etc</div>
    )
  }
}

class leftCol extends React.Component {
  render(){
    return(
      <ul>
        <li><a href="tab1">Tab 1</a></li>
        <li><a href="tab2">Tab 2</a></li>
        <li><a href="tab3">Tab 3</a></li>
      </ul>
    )
  }
}

Answer 1

由于您正在执行硬页面加载(正常 <a> s)，因此您只需访问 MyParent 中构造函数中的 URL 并基于该 URL 进行渲染即可。

class myParent extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        page: location.pathname.split('/').pop(),
       }
     }
     componentDidMount() {
       ReactDOM.render(<Conference currentTab="this.state.currentTab" />,document.getElementById('rightCol'));
       ReactDOM.render(<TabMenu />,document.getElementById('leftCol'));
     }
     render() {
       if (this.state.page === 'tab1') { ... }
     }
}

如果您想更改为客户端路由，则可以将链接设置为preventDefault 并使用pushState。您可以使用 EventEmitter ( new (require('events').EventEmitter()) ) 并监听 componentDidMount 中 MyParent 中的事件。在子级中，您可以在执行pushState后调度事件。您仍将捕获 MyParent 中的初始 URL，如上所示。