Question

首先，我是整个React和Electron的新手，所以我不确定我所做的事情是否正确。我正在尝试将我的组件分成不同的JSX文件并导入它们并将它们渲染到我的电子应用程序的索引页面中的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中，它会填充它们但它会破坏tabpage功能 - tab脚本期望标签页直接填充在“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？

干杯。

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

Answer 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。

反应/电子渲染组件失败

2 个答案: