个人中心
gpt4 book ai didi

javascript - React/Electron 渲染组件失败

转载 作者：太空宇宙 更新时间：2023-11-04 02:05:01 26 4
gpt4 key购买 nike

首先，我对整个 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 中？

干杯。

最佳答案

正确的方法是渲染导航页面，然后在导航页面内渲染选项卡 Pane 。理想情况下，您只需调用 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>
    )
  }
}

关于javascript - React/Electron 渲染组件失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44639102/

26 4 0
文章推荐： node.js - 在 Windows 上找不到 monax 命令
文章推荐： html - 在面板内居中 btn-toolbar
文章推荐： css - ReactJS 关键 Prop 在 CSS 动画中不起作用
文章推荐： javascript - Mongoose |预保存 Hook 中的对象更改不会保存到数据库
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com