小编Apu*_*rvG的帖子

我是javascript和web应用程序环境的新手.我见过一个反应式Web应用程序项目,它有一个公共目录,一个客户端目录和一个服务器目录.我有几个问题

1. 如果我们已经准备好后端API并准备好后端服务器,为什么我们需要在前端项目中设置快速服务器文件？

2. 如果我们让前端响应并调用API来获取应用程序的数据,我们是否需要一个快速服务器？

3. 前端服务器和前端项目中的快速服务器不一样吗？

我想在azure云上部署我的反应项目.我已经在heroku上部署了它,并且它很容易部署.我只需要执行git push heroku master将其部署到heroku上.但我对如何在天蓝色上做这件事毫无头绪.所以我的项目中有一个bulid目录,每次运行gulp命令时都会生成该目录.它包含所有构建文件.任何人都可以指导我如何进入azure？

这是我的项目结构

我在create-react-app上构建我的react应用程序.我希望每个组件都有本地css.我正在计划使用css模块但这些都是问题

如果我使用css模块

• 我将不得不运行eject命令
• 我可以使用css模块和scss文件.我像这样在scss中嵌套

这是我的scss文件之一

$scalel: 1.7vmin;
.navbar-side {
  position: absolute;
  background: rgba(255,255,255,0.15);
  width: 17 * $scalel;
  top: 6.2 * $scalel;
  padding-bottom: 2 * $scalel;
  .tessact-logo {
    width: 50%;
    height: 12 * $scalel;
    background: url('/public/images/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 25%;
  }
  .navbar-item {
    padding: 0.8 * $scalel;
    transition: all 0.2s ease;
    cursor: pointer;
    padding-left: 3 * $scalel;
    &:hover {
      background: rgba(255,255,255,0.15);
    }
    &.active {
      background: rgba(255,255,255,0.25);
    }
    .navbar-item-inside {
      display: none;
    }
  }
}

*How can …

我的反应项目中有一个浮动按钮(材料ui).我想点击它时打开"选择文件"对话框.我没有得到任何解决方案.我试过这样做但没有用.我不想使用jquery.

</div>
            <input id="myInput" type="file" style="visibility:hidden" />
            <FloatingActionButton className="floatingButton" backgroundColor='#293C8E' onClick ="$('#myInput').click();">
                <ContentAdd />
            </FloatingActionButton>
        </div>

有人可以告诉我我到底需要做什么吗？

我正在尝试使用文件夹输入而不是文件输入。我想选择一个文件夹而不仅仅是一个文件。我从已经提出的问题中尝试了可用的解决方案，但没有一个有效。这是我试过的

试过

 <input id="myInput" type="file" webkitdirectory directory multiple/>

面临的问题

1）。我正在研究 react 和 react 突出显示“webkitdirectory 目录”并说“此处不允许使用属性目录”。似乎反应拒绝这些属性。如何解决这个问题？

https://bugs.chromium.org/p/chromium/issues/detail?id=59818

2）。我读过 Linux 不支持文件夹选择。我正在使用 linux，但无法选择文件夹。问题是因为这个吗？我该如何解决？

我认为如果第一个得到解决，那么一切都会好起来的。请提出解决方案或解决此问题。

我想在我的 React 应用程序中使用 noUiSlider。我已经在我的 componentDidMount 方法中完成了初始化，但 noUiSlider 不可见。我在控制台中没有收到任何错误。元素列表还显示页面上存在 nouislider，但我看不到它。

import noUiSlider from 'nouislider'


class AppBarComponent extends Component {
componentDidMount(){

    var noUi_slider = document.getElementById('noUiSlider');

    $(function () {

    noUiSlider.create(noUi_slider, {
        start: [20, 80],
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });
}

componentWillUnmount(){}


render() {
    return (

        <div>
        <div id="noUiSlider" className="bg-success"></div>
        </div>
);
}
};

我正在尝试在我的 React 应用程序中使用 jquery 插件。每次我尝试使用某些 jquery 第三方插件时，都会收到一条错误消息，指出 $(...).somePlugin 不是函数。目前我正在尝试使用 ionRangeSlider。它给了我错误

Uncaught TypeError: (0 , _jquery2.default)(...).ionRangeSlider is not a function

js文件

import $ from 'jquery'
import 'bootstrap-tagsinput'

class AddTagSection extends Component {


    componentDidMount=()=> {

        this.slider = $(this.inputSlider).ionRangeSlider();

    }

<div className="irs-wrapper">
                            <input type="text"  ref={node=>this.inputSlider=node} className='input-slider' id="ionSlider-newTag" name="ionSlider"/>
                        </div>

以下是 ionRangeSlider.js （插件）中调用的函数

$.fn.ionRangeSlider = function (options) {
        return this.each(function() {
            if (!$.data(this, "ionRangeSlider")) {
                $.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++));
            }
        });
    };

据我在网上读到的，这是一个多个 jquery 冲突问题。

关于我的应用程序：我的项目通过 npm 安装了 jquery。所以 package.json 中存在一个 jquery。我还在我的index.jade …

在我的React项目中，一切都可以在vmware上正常运行。但是当我克隆相同的应用程序并运行gulp命令时，在编译过程中出现此错误：

   MacBook-Pro:Frontend1.0 apurvgandhwani$ gulp
[18:42:31] Failed to load external module @babel/register
[18:42:31] Requiring external module babel-register
[18:42:32] Using gulpfile ~/Frontend1.0/gulpfile.babel.js
[18:42:32] Starting 'build:watch'...
[18:42:32] Starting 'copy:assets'...
[18:42:32] Starting 'copy:vendors'...
  Cleaned build/ 
  Copied 12 asset entries.
[18:42:32] Finished 'copy:vendors' after 329 ms
[18:42:32] Starting 'copy:views'...
[18:42:32] copied views all files 19.75 kB
[18:42:32] Finished 'copy:views' after 77 ms
[18:42:32] Starting 'copy:public'...
[18:42:33] Finished 'copy:public' after 132 ms
[18:42:33] Finished 'copy:assets' after 540 ms
[18:42:33] Starting 'bundle:dll'...
DLL Bundled.
Hash: 45f26d608c690be6e6c5
Version: …

我正在尝试映射从 api 调用获得的响应。我想在这张地图上渲染一个div。这就是我的代码的样子：

<div data-simplebar className="img-scroll">
    {this.state.imageSearchResults.items.map((item, ind) => {
        return <div className="image-square" style={{backgroundImage:`url(${this.state.imageSearchResults.items[0].link})`}}></div>
    })}
</div>

我收到一条错误消息

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

这有什么问题吗？我过去也以同样的方式进行过映射，但从未遇到过这样的错误。

我有一个反应项目代码.我想在谷歌云上部署它.我的项目中有一个构建目录.这是我的项目结构.

如何在谷歌云上部署它.有人可以指导我.我必须把我项目中的所有文件放在那里.我很擅长在线部署应用程序.我是否需要放置构建文件夹,还是需要在那里上传完整的项目？