React/Electron Rendering Components Is Failed

首先，我是整个React和Electron的新手，所以我不确定我所做的事是否正确。我试图将我的组件分离为不同的JSX文件，并将它们导入并将它们呈现在我的索引页中的我的Electron应用程序的div标签中。不过，我有点困惑，因为它“部分”起作用。我试图分开我的标签页。我有一个容器文件，它看起来像这样React/Electron Rendering Components Is Failed

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我上面说过，它确实填充了它们，但是它破坏了tabpage功能 - tab脚本希望tab页面被直接填充到“viewTabPagesTest”div中，而不是另一个di v下。

如果我通过直接定位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中？

干杯。

来源

2017-06-19 Michael Wayne

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

来源

2017-06-19 20:13:31

所以你说我不应该把我的选项卡窗格分成文件，而是把它们保存在一个单独的JSX文件中，然后渲染它呢？ –

如果您愿意，您可以将选项卡窗格分隔为单独的文件，但看起来它们非常相似，可以抽象为一个支持道具的组件。我会用一些示例代码更新我的帖子 –

您的代码应该看起来像这样。 ReactDOM.render被调用一次，然后子节点的渲染函数被递归地调用到最后一个节点。我忽略了“TabPanes”的抽象 –

你重复自己。这是不必要的。尝试在选项卡内创建道具并使用一个名为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。

来源

2017-06-19 20:43:13 Ozan

React/Electron Rendering Components Is Failed

回答

相关问题