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

回答

相關問題