小编yev*_*evg的帖子

在React中有条件地禁用选择选项

我构建了自己的React select组件,并希望有一个选项可以将默认值设置为 disabled

该组件基本上如下所示:

<select
    id={this.props.id}
    name={this.props.name}
    value={this.props.value}
    defaultValue={this.props.default}
    onClick={this.handleFieldClick}
    onChange={this.handleFieldChange} >

         <option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

         { Object.keys(this.props.options).map((val, i) => ( 
             <option key={i} value={val}>{this.props.options[val]}</option>
         ))}

 </select>
Run Code Online (Sandbox Code Playgroud)

这行给我的问题是以下内容:

<option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>
Run Code Online (Sandbox Code Playgroud)

“ disabled”选项仍然是可选择的,并且呈现如下:

<option value="" selected="">Default Option</option>
Run Code Online (Sandbox Code Playgroud)

我认为这是因为禁用选项的正确语法是<option disabled ></option>,而不是<option disabled="true" ></option>

但是当我格式化JSX时,如下所示:

<option value="" {this.defaultDisabled ? "disabled" : ""} >{this.props.defaultLabel}</option>
Run Code Online (Sandbox Code Playgroud)

我收到一个使应用程序崩溃的错误。

有条件地使用JXS将指令值写入标记和/或有条件地在React中设置禁用选项的正确语法是什么?

reactjs react-select select-options

11
推荐指数
2
解决办法
1万
查看次数

为什么Angular Controller中的jQuery很糟糕?

人们似乎反对使用Angular控制器中的jQuery.为什么??

假设你有:

<div id="test">{{test}}</div>
<button class="btn" ng-click="foo()">test</button>
Run Code Online (Sandbox Code Playgroud)

.controller('testCtrl', function($scope, $http, $state){

    $scope.test = 'this is the test scope';

    $scope.foo = function(){

        angular.element("#test1").toggle(300);      
    }

}) 
Run Code Online (Sandbox Code Playgroud)

这是一个..

  • 简单
  • 本地人
  • 快速
  • 清洁
  • 可读
  • 逻辑上合理

..操纵DOM.

此外,您正在采用Angular强大的框架,并采用经过验证的技术,我们都知道并喜欢.(至少我这样做)

人们说指令应该用于DOM操作,但是指令很复杂且可读性较差.另外,你告诉我每次想要以某种新的方式操作DOM时都必须编写自定义指令吗?是不是没有人有时间!另外,如果不是DOM操作,那么双向数据绑定是什么.什么是控制器,如果不是包含属于给定视图的属性和方法的类,使用jQuery只是另一种排序方法.

我编写的代码清洁并与最佳实践保持一致.任何人都可以给我一个令人信服的理由,为什么控制器中的jQuery与此相反?

javascript jquery dom angularjs

7
推荐指数
0
解决办法
145
查看次数

部署Symfony应用-ClassNotFoundException错误

我正在学习Symfony框架,并尝试使用Git将我放在一起的简单样板应用程序部署到Heroku。

由于以下致命错误,导致部署失败:

Uncaught Symfony\Component\Debug\Exception\ClassNotFoundException: Attempted to load class "WebServerBundle" from namespace "Symfony\Bundle\WebServerBundle

Did you forget a "use" statement for another namespace? in /tmp/build_cbeb92af6c9ee04b07e1f85618211649/src/Kernel.php:32

内核.php

<?php

namespace App;

use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait;
use Symfony\Component\Config\Loader\LoaderInterface;
use Symfony\Component\DependencyInjection\ContainerBuilder;
use Symfony\Component\HttpKernel\Kernel as BaseKernel;
use Symfony\Component\Routing\RouteCollectionBuilder;

class Kernel extends BaseKernel {

    use MicroKernelTrait;

    const CONFIG_EXTS = '.{php,xml,yaml,yml}';

    public function getCacheDir(){

        return $this->getProjectDir().'/var/cache/'.$this->environment;
    }

    public function getLogDir(){

        return $this->getProjectDir().'/var/log';
    }

    public function registerBundles(){

        $contents = require $this->getProjectDir().'/config/bundles.php';
        foreach ($contents as $class => $envs) {
            if (isset($envs['all']) || isset($envs[$this->environment])) …
Run Code Online (Sandbox Code Playgroud)

php deployment heroku symfony symfony4

6
推荐指数
1
解决办法
3134
查看次数

从对象渲染 React 组件

假设我有以下对象,它将组件作为条目:

import Comp1 from './Comp1'
import Comp2 from './Comp2'
import Comp3 from './Comp3'

const components = { 'comp1' : Comp1, 'comp2' : Comp2, 'comp3' : Comp3 }
Run Code Online (Sandbox Code Playgroud)

我想用这个对象来渲染这些组件:

Object.keys(components).map((key, i) => (

    <div key={i}> 
        <components[key] /> // this does not work
    </div>
))}
Run Code Online (Sandbox Code Playgroud)

实际上,我正在尝试使用配置对象渲染路由:

export const routes =   {

'home' : {  
    path: '/', 
    component: Home,
    exact: true,
    access: {
        anonymous: true
    },
    navigation: {
        label: 'Home',
        icon: 'fa-home',
        show: true
    }
},
Run Code Online (Sandbox Code Playgroud)

....

const Routes = () => ( …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-component

6
推荐指数
1
解决办法
1884
查看次数

使用 webpack 观看目录

我在开发环境中安装了 webpack 来捆绑我的依赖项。此外,我正在使用该webpack-merge-and-include-globally插件连接一堆 js 文件并包含在标记中的脚本标记中。

当我使用 --watch 标志运行 webpack 时,它会监视我的条目文件 ( build/index.js),但我也希望它监视/build/目录中的所有文件以及我放置在其中的任何文件或目录 - 某种“深度监视”。

如何将 webpack 设置到--watch与我的入口文件无关的任意目录?

webpack.config.js

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const merge = require('webpack-merge-and-include-globally');

module.exports = {
    entry: "./build/index.js",
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new merge({
            files: {
                "./app.js" : [
                    './build/js/app.js',
                    './build/js/controllers/*',
                ],
            },
        }),
    ], …
Run Code Online (Sandbox Code Playgroud)

javascript watch node.js npm webpack

6
推荐指数
1
解决办法
5231
查看次数

跨子域的跨域资源共享 (CORS)

假设我在www.example.com 上有一个应用程序(a)

如果我的资源位于www.someotherdomain.com (b) 并且我从 (a) 到 (b) 进行 AJAX 调用,那么 CORS 规则将适用。

但是,如果我的资源位于api.example.com (c),那么在从 (a) 到 (c) 发出 AJAX 请求时,人们会期望避免 CORS - 但是,我发现情况并非如此。

跨子域发出请求时,CORS 规则仍然适用 -这是真的吗?

这个规则有没有(不使用JSONP)?

我无法想象在www.amazon.com和之间发出的所有请求resource.amazon.com,例如,总是 CORS 请求。大规模管理标头和预检请求/响应似乎很乏味且成本​​高昂。

我在这里缺少什么吗?

ajax http xmlhttprequest cors mxhr

5
推荐指数
1
解决办法
5849
查看次数

在Symfony 4/Twig Template中包含Assets(CSS,JS)

我正在学习Symfony并尝试在Symfony 4中设置样板应用程序

这个Symfony文档描述了如何在页面中包含资源,即使用这样的asset包.

<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />

<link href="{{ asset('css/blog.css') }}" rel="stylesheet" /> 
Run Code Online (Sandbox Code Playgroud)

我已安装此软件包并尝试链接到我的/public目录中的css文件.

我知道Symfony建议将资源放在/assets根目录下的文件夹中,但如果可能的话我想避免这种情况.将资产放在公共目录中对我来说更有意义.

我的Twig基本模板如下:

<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>

        {% block stylesheets %}
            <link href="{{ asset('public/css/main.css') }}" rel="stylesheet" />
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
    <footer>footer</footer>
</html>
Run Code Online (Sandbox Code Playgroud)

问题

当我加载路径/页面/模板时,链接的css将呈现为来自根的简单链接(就像我将其链接为<link href="public/css/main.css" rel="stylesheet" />- 当然没有路由设置,public/*并且返回404/Not Found.

好像asset() …

css php symfony twig symfony4

5
推荐指数
1
解决办法
1万
查看次数

获取文件名中包含空格的 AWS S3 对象

我正在尝试使用 PHP 开发工具包从 AWS S3 下载对象。

$filename = "filename with spaces in it.jpg";

$src = "path/from/bucket-root/".$filename;

$result = S3Client->getObject([

    'Bucket' => 'my-bucket-name',
    'Key' => $src
]);
Run Code Online (Sandbox Code Playgroud)

当我运行这个时,我收到一个错误:

Error executing "GetObject" ... GET filename%20with%20spaces%20in%20it.jpg resulted in a 404 Not Found response:

S3 客户端正在对空格进行编码,但随后无法解析路径。

我尝试过以下所有方法:

$filename = urlencode("filename with spaces in it.jpg");
$filename = urldecode("filename with spaces in it.jpg");
$filename = addslashes("filename with spaces in it.jpg");
$filename = str_replace(' ','+',"filename with spaces in it.jpg");
Run Code Online (Sandbox Code Playgroud)

还有几种组合——此时我只是往墙上扔粪便。

我的关键路径和存储桶名称/路由是正确的,因为我能够成功获取文件名中没有空格的对象。

如何抓取文件名中带有空格的对象?

php amazon-s3 amazon-web-services aws-php-sdk aws-sdk

5
推荐指数
1
解决办法
1万
查看次数

Symfony PHP 中事件订阅者的重定向响应

我正在尝试从连接到 Synfony PHP 内核事件的事件订阅者返回一个永久 (301) 重定向响应。

我的订阅者如下:

use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpKernel\Event\GetResponseEvent;
use Symfony\Component\HttpKernel\KernelEvents;

use Symfony\Component\HttpFoundation\RedirectResponse;

class KernelSubscriber implements EventSubscriberInterface {

    public function __construct() {

        // some stuff here but not relevant for this example
    }

    public static function getSubscribedEvents(): array {

        return [ KernelEvents::REQUEST => 'onRequest' ];
    }

    public function onRequest(GetResponseEvent $event): void {

        // if conditions met
        //     301 redirect to some internal or external URL

        if(!$event->isMasterRequest()) return;
    }   
}
Run Code Online (Sandbox Code Playgroud)

如果这是一个控制器,我会返回$this->redirectToRoute('route')或类似的东西,但从onRequest方法上下文大不相同。

如何从该事件订阅者返回响应(特别是重定向)?

php symfony php-7.2 symfony4

5
推荐指数
1
解决办法
2849
查看次数

使用Webpack导出函数到前端

我是 webpack 的新手,正在尝试建立一个基本的实现。

我有一个文件script.js,里面有一些函数

脚本.js

export foo = () => {
   console.log('foo')
}

export bar = () => {
   console.log('bar')
}
Run Code Online (Sandbox Code Playgroud)

我正在尝试将其添加到我的 webpack 中bundle.js,以便我可以在标记中使用这些函数。

webpack.conf.js

const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
Run Code Online (Sandbox Code Playgroud)

我的index.js看起来像这样:

import * as scripts from './scripts.js';
Run Code Online (Sandbox Code Playgroud)

这在节点中有效,因为如果我添加console.log(scripts.foo())到行index.js下方import,我可以观察控制台日志。

但是如果我尝试调用foo()我的标记,我会收到一个未定义的错误:

Uncaught ReferenceError: foo is not defined

索引.html

<script src="./dist/bundle.js"></script>
<script> …
Run Code Online (Sandbox Code Playgroud)

javascript node.js npm ecmascript-6 webpack

5
推荐指数
1
解决办法
3611
查看次数