Fatal编程技术网
  • javascript/
  • Javascript React/Electron呈现组件出现故障

Javascript React/Electron呈现组件出现故障

javascript node.js reactjs electron

Javascript React/Electron呈现组件出现故障,javascript,node.js,reactjs,electron,Javascript,Node.js,Reactjs,Electron,首先，我对整个反应和电子的事情还不熟悉，所以我不确定我所做的事情是否正确。我正在尝试将我的组件分离到不同的JSX文件中，并将它们导入到我的Electron应用程序索引页面中的div标记中。然而，我有点困惑，因为它“部分”起作用。我正在尝试分开我的标签页。我有一个容器文件，看起来像这样 import React from 'react'; import ReactDOM from 'react-dom'; import NavigationLeft from '../Components/Lay

首先，我对整个反应和电子的事情还不熟悉，所以我不确定我所做的事情是否正确。我正在尝试将我的组件分离到不同的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'));

}

从“React”导入React；
从“react dom”导入react dom；
从“../Components/Layout/Navigation.jsx”导入NavigationLeft；
从“../Components/TabPanes/TabPane1.jsx”导入TabPane1；
从“../Components/TabPanes/TabPane2.jsx”导入TabPane2；
从“../Components/TabPanes/TabPane3.jsx”导入TabPane3；
从“../Components/TabPanes/TabPane4.jsx”导入TabPane4；
从“../Components/TabPanes/TabPane5.jsx”导入TabPane5；
从“../Components/TabPanes/TabPane6.jsx”导入TabPane6；
从“../Components/TabPanes/TabPane7.jsx”导入TabPane7；
window.onload=函数（）{
render（，document.getElementById（'viewNavigationLeft'）；
ReactDOM.render（，document.getElementById（'viewTabPane1'）；
ReactDOM.render（，document.getElementById（'viewtabane2'）；
ReactDOM.render（，document.getElementById（'viewTabPane3'）；
ReactDOM.render（，document.getElementById（'viewTabPane4'）；
ReactDOM.render（，document.getElementById（'viewtabane5'）；
ReactDOM.render（，document.getElementById（'viewtabane6'）；
ReactDOM.render（，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>


…雅达雅达
//在渲染器进程中安装babel挂钩
要求（“巴别塔寄存器”）；
要求（“./Containers/MainApp”）；

最后，我的组件内容（仅其中一个）如下所示：

'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

“使用巴别塔”；
从“React”导入React；
类TabPane1扩展了React.Component{
render（）{
返回(
yada yada等等tabPane1的选项卡内容
)
}
}
导出默认选项卡1
如前所述，如果我将它们单独填充到div中，它确实会填充它们，但会破坏tabpage功能-tab script希望选项卡页面直接填充到“viewtabagestest”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'));

}

从“React”导入React；
从“react dom”导入react dom；
从“../Components/Layout/Navigation.jsx”导入NavigationLeft；
从“../Components/TabPanes/TabPane1.jsx”导入TabPane1；
从“../Components/TabPanes/TabPane2.jsx”导入TabPane2；
从“../Components/TabPanes/TabPane3.jsx”导入TabPane3；
从“../Components/TabPanes/TabPane4.jsx”导入TabPane4；
从“../Components/TabPanes/TabPane5.jsx”导入TabPane5；
从“../Components/TabPanes/TabPane6.jsx”导入TabPane6；
从“../Components/TabPanes/TabPane7.jsx”导入TabPane7；
window.onload=函数（）{
render（，document.getElementById（'viewNavigationLeft'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
ReactDOM.render（，document.getElementById（'viewTabPagesTest'）；
}
实现这一点的正确方法是什么？一次将组件渲染到单个div中

干杯。

正确的方法是呈现导航页面，然后在导航页面内呈现选项卡窗格。理想情况下，只调用
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>

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

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

“使用巴别塔”；
从“React”导入React；
导出默认类TabPane1扩展React.Component{
render（）{
返回(
yada yada等等tabPane1的选项卡内容
)
}
}
正确的方法是呈现导航页面，然后在导航页面内呈现选项卡窗格。理想情况下，只调用
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>

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

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

“使用巴别塔”；
从“React”导入React；
导出默认类TabPane1扩展React.Component{
render（）{
返回(
yada yada等等tabPane1的选项卡内容
)
}
}
你在重复你自己。那是不必要的。尝试在选项卡内创建道具，并使用名为TabPane的组件。例如，通过使用道具，您不必有太多的代码来做同样的事情。试试像这样的东西

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

class选项卡扩展了React.Component{
render（）{
返回(
{this.props.paneText}
)
}
}
然后，当你打算在其他地方使用它时，你必须做的事情就是简单的

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

从“../Components/TabPanes/TabPane.jsx”导入TabPane；
类TabContainer扩展了React.Component{
render（）{
返回(
)
}
然后你必须创建一个App.jsx，然后将所有容器放在那里

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

ReactDOM.render（.
你在重复你自己。这是不必要的