React / Electron 渲染组件失败答案

【问题标题】：React / Electron Rendering Components Is FailingReact / Electron 渲染组件失败
【发布时间】：2017-06-19 20:10:30
【问题描述】：

首先，我对整个 React 和 Electron 都是新手，所以我不确定我正在做的事情是否正确。我正在尝试将我的组件分成不同的 JSX 文件并将它们导入并将它们呈现到我的 Electron 应用程序的索引页面中的 div 标签中。但是，我有点困惑，因为它“部分”有效。我正在尝试分离我的标签页。我有一个看起来像这样的容器文件

import React from 'react';
import ReactDOM from 'react-dom';

import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';

window.onload = function(){
  ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
  ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPane1'));
  ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPane2'));
  ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPane3'));
  ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPane4'));
  ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPane5'));
  ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPane6'));
  ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPane7'));

}

我的 index.html 页面上的内容似乎加载得很好，但是当它将我的组件渲染到页面中时，它只是复制了“TabPane1”，其余的甚至都不存在。从字面上看，它们似乎是重复的。

我的 index.html 页面

<html>
<head>
...yada yada
<script>
        // install babel hooks in the renderer process
        require('babel-register');
    </script>
</head>
<body>
    <script>
        require('./Containers/MainApp');
    </script>

    <div class="wrapper">
        <div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
        <div id="viewMainPanel" class="main-panel">
            <div id="viewTabPagesTest" class="tab-content">
                <div id="viewTabPane1"></div>
                <div id="viewTabPane2"></div>
                <div id="viewTabPane3"></div>
                <div id="viewTabPane4"></div>
                <div id="viewTabPane5"></div>
                <div id="viewTabPane6"></div>
                <div id="viewTabPane7"></div>

            </div>
        </div>
    </div>


</body>

最后，我的组件内容（只是其中之一）如下所示：

'use babel';

import React from 'react';

class TabPane1 extends React.Component {
 render(){
    return(
        <div>
            <div className="tab-pane" id="tabPane1">
                yada yada blah blah tab content for tabPane1
            </div>
        </div>
    )
  }
}

export default TabPane1

如果我如上所述将它们分别填充到 div 中，它确实会填充它们，但会破坏标签页功能 - 标签页脚本期望标签页直接填充在“viewTabPagesTest”div 下，而不是在它下面有另一个 div .

如果我通过直接定位 viewTabPagesTest 来做同样的事情，它只会呈现最后一个元素，而不是所有标签页。所以这就是我真正迷路的地方。

import React from 'react';
import ReactDOM from 'react-dom';

import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';

window.onload = function(){
  ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
  ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPagesTest'));
  ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPagesTest'));
  ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPagesTest'));
  ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPagesTest'));
  ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPagesTest'));
  ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPagesTest'));
  ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPagesTest'));

}

实现这一点的正确方法是什么 - 一次将我的组件渲染到单个 div 中？

干杯。

【问题讨论】：

标签： javascript node.js reactjs electron

【解决方案1】：

正确的方法是渲染您的导航页面，然后在您的导航页面内渲染您的选项卡窗格。理想情况下，您只需要调用一次ReactDOM.render。像这样的：

import React from 'react';
import ReactDOM from 'react-dom';

import NavigationLeft from '../Components/Layout/Navigation.jsx';

window.onload = function(){
  // ideally you pick a div and render your whole application rather than bits and pieces of it. 
  ReactDOM.render(<NavigationLeft />, document.getElementById('left'));
}

<html>
<head>
...yada yada
<script>
        // install babel hooks in the renderer process
        require('babel-register');
    </script>
</head>
<body>
    <script>
        require('./Containers/MainApp');
    </script>

    <div class="wrapper" id="left">
    </div>

</body>

NavigationLeft.jsx

import React from 'react';
import-your-tabs from 'wherever';

export default class NavigationLeft extends React.Component {
  render() {
    return (
        <div class="wrapper">
        <div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
        <div id="viewMainPanel" class="main-panel">
            <div id="viewTabPagesTest" class="tab-content">
                <TabPane1 />
                <TabPane2 />
                .
                .
                .
                <TabPane7 />
            </div>
        </div>
    )
  }
}

TabPane1.jsx

'use babel';

import React from 'react';

export default class TabPane1 extends React.Component {
 render(){
    return(
        <div className="tab-pane" id="tabPanel1">
            yada yada blah blah tab content for tabPane1
        </div>
    )
  }
}

【讨论】：

所以你是说我不应该将我的选项卡窗格分成文件，而是将它们保存在单个 JSX 文件中并呈现它？
如果您愿意，您可以将您的选项卡窗格分隔为单独的文件，但看起来它们非常相似，可以抽象为一个接收道具的单个组件。我会用一些示例代码更新我的帖子
您的代码应如下所示。 ReactDOM.render 调用一次，然后递归调用子节点的渲染函数到最后一个节点。我省略了TabPanes 的抽象

【解决方案2】：

你在重复自己。那是不必要的。尝试在选项卡内创建道具并使用一个名为 TabPane 的组件。例如，通过使用道具，您不必编写太多代码来做同样的事情。尝试类似

class TabPane extends React.Component {
 render(){
    return(
        <div>
            <div className="tab-pane">
            {this.props.paneText}
            </div>
        </div>
    )
  }
}

然后当你打算在其他地方使用它时，你要做的就是简单的。

import TabPane from '../Components/TabPanes/TabPane.jsx';

class TabContainer extends React.Component {
  render() {
    return (
      <div>
        <TabPane paneText='This my first tabPane' />
        <TabPane paneText='Second tabPane' />  
     </div>
  )
}

然后您必须创建一个 App.jsx，然后将所有容器放在那里。完成此操作后，您可以简单地编写；

ReactDOM.render(<App />, document.getElementById('viewTabPagesTest'));

最好检查Hierarchies in React。

【讨论】：