Question

我已经在普通的HTML + SASS中建立了一个网站，我想添加一些React来处理网站的主要内容。我在左侧列中有一个内部链接列表，在右栏中显示不同的内容（非常类似于标签页）。

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

我的问题是我需要父组件将左链接和正确的内容呈现给不同的元素。我似乎无法弄清楚如何做到这一点。

我可以从下面看到，实际上没有任何内容会呈现，因为两个ReactDom.render（）都在myParent中，它们永远不会被调用。但我的问题似乎是我需要在那里调用/渲染左右两个cols，以便能够将状态更新传递给每个，以便我可以控制内容。如果他们位于父组件之外的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并基于此进行渲染。

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中的初始网址，如上所示。

Answer 2

我认为，问题是您使用小写字母开头定义了class名称，请使用以下名称：MyParent RightCol and LeftCol代替myParent rightCol, leftCol。

原因：如果React Class名称以小写字母开头，那么class内的任何方法都不会被调用，即没有Renders，并且你不会t在Browser console中收到任何错误消息，因为以小写字母开头的名称被视为HTML元素，其规则是所有React组件必须以大写字母开头。

参考：https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad

React - 父组件将子组件呈现给不同的元素/节点

2 个答案: