小编Mik*_*tin的帖子

React + Redux - 在表单组件中处理CRUD的最佳方法是什么?

我有一个用于创建,读取,更新和删除的表单.我创建了3个具有相同形式的组件,但我传递了不同的道具.我有CreateForm.js,ViewForm.js(只读取删除按钮)和UpdateForm.js.

我曾经使用PHP,所以我总是以一种形式做这些.

我使用React和Redux来管理商店.

当我在CreateForm组件中时,我传递给我的子组件,这个props createForm={true}不会用值填充输入,也不会禁用它们.在我的ViewForm组件中,我传递了这个道具readonly="readonly".

我有一个textarea的另一个问题,它充满了一个值,并且不可更新.具有值的react textarea是readonly但需要更新

只有一个组件可以处理这些不同的表单状态,最好的结构是什么?

你有任何建议,教程,视频,演示分享?

javascript crud reactjs redux

128
推荐指数
2
解决办法
4万
查看次数

Browserify,Babel 6,Gulp - 扩展运算符上的意外标记

我正在尝试让我的Browserify/Babelify/Gulp在我的项目中工作,但它不会占用传播操作符.

我从gulpfile中得到了这个错误:

[SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js]
Run Code Online (Sandbox Code Playgroud)

这是我的gulpfile.js

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');

gulp.task('build', function () {
  return browserify({entries: './src/client/app.js', extensions: ['.js'], debug: true})
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'));
});

gulp.task('default', ['build']);
Run Code Online (Sandbox Code Playgroud)

我试图创建一个.babelrc文件,但它做同样的事情.当我删除传播操作符时,我的脚本工作.

这是发生Unexpected令牌的文件(非常简单).

import utils from '../utils/consts';

const …
Run Code Online (Sandbox Code Playgroud)

javascript browserify ecmascript-6 gulp babeljs

74
推荐指数
2
解决办法
3万
查看次数

React + Redux - 当输入具有来自状态的值时输入onChange非常慢

我的输入是由我的州的一个值填充的.

<input id="flashVars" name="flashVars" type="text" value={settings.flashVarsValue} disabled={isDisabled} onChange={handleChange} />
Run Code Online (Sandbox Code Playgroud)

Settings是Redux的状态.当我在输入中输入一个值时,我必须指定一个onChange函数.这是我的onChange函数:

handleFlashVarsChange(e) {
  let { dispatch } = this.props;

  dispatch( changeFlashVarsValue(e.target.value) );
}
Run Code Online (Sandbox Code Playgroud)

它更改flashVarsValue输入值的状态值.但是当我输入我的输入时,它会滞后.我不明白为什么每次改变输入值都应该调用调度.

有什么方法可以减少滞后吗?

我的减速机:

import { ACTIONS } from '../utils/consts';

const initialState = {
  ...
  flashVarsValue: '',
  ...
};

export function formSettings(state = initialState, action = '') {
  switch (action.type) {

    ...

    case ACTIONS.CHANGE_FLASHVARS_VALUE:
      return Object.assign({}, state, {
        flashVarsValue: action.data
      });

    default:
      return state;
  }
}
Run Code Online (Sandbox Code Playgroud)

我的行动:

export function changeFlashVarsValue(data) {
  return {
    type: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux

40
推荐指数
3
解决办法
3万
查看次数

学习Dart是好事还是我必须保持基本的JavaScript?

使用基本的Javascript语言更好还是Dart会节省很多时间?我认为Dart看起来非常酷的软件,但它会增加我的产量吗?Dart代码比javascript更快吗?

这是一个好的方式还是仍然不清楚是否选择学习它?

我的目标是通过一些复杂的自定义过渡来制作非常好的动画网站.我使用jQuery做得很好,但我想比使用jQuery插件和调整更具体和专业.

非常感谢您的帮助和建议.

javascript html5 client-side dart

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

使用React和redux从不同的reducer调用一个动作

我有2个组件; 市场和地位.状态组件管理用户拥有的金额,市场有按钮购买一些东西.当我点击按钮(在市场组件中)时,我希望我的钱减少.

我怎样才能以最好的方式实现这一目标?

这是我的应用程序组件,具有市场和状态:

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as MarketActions from '../actions/market-actions';
import * as StatusActions from '../actions/status-actions';

import Market from './Market.react';
import Status from './Status.react';

export default class App extends React.Component {
  render() {
    const { dispatch, market, status } = this.props;

    return (
      <div>
        <h1>App</h1>
        <Link to='/'>App</Link>{' '}<Link to='/home'>Home</Link>
        <Status status={status} {...bindActionCreators(StatusActions, dispatch)} />
        <Market market={market} {...bindActionCreators(MarketActions, dispatch)} …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux

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

节点js离线语音到文本

我想用Node.js和Tessel.io创建一个机器人,我买了音频模块,我想知道它是否存在任何语音文本或音频到文本包的节点js或其他东西.

有人可以帮我弄这个吗?

谢谢

javascript audio speech-recognition node.js

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

docker-compose在node_modules上的卷但是为空

我是Docker的新手,我想在我的计算机上映射node_modules文件夹(用于调试目的).

这是我的docker-compose.yml

web:
  build: .
  ports:
    - "3000:3000"
  links:
    - db
  environment:
    PORT: 3000
  volumes:
    - .:/usr/src/app
    - /usr/src/app/node_modules
db:
  image: mongo:3.3
  ports:
    - "27017:27017"
  command: "--smallfiles --logpath=/dev/null"
Run Code Online (Sandbox Code Playgroud)

我在使用Docker for Mac.当我运行docker-compose up -d所有正确,但它在我的计算机上创建一个node_modules文件夹,但它是空的.我进入容器的bash和ls node_modules,所有包都在那里.

如何在计算机上获取容器上的内容呢?

谢谢

node.js docker docker-compose docker-volume

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

达到最大功能嵌套级别'100',中止

我想创建一个爬虫,从0到10 000 000逐个获取所有页面的信息.我不需要花多少时间.我只是希望它有效.这是我获得的错误

Fatal error: Maximum function nesting level of '100' reached, aborting! in D:\wamp\www\crawler\index.php on line 25

第25行是

$htmlstr = (string)$this->curlGet($url);
Run Code Online (Sandbox Code Playgroud)

还有我完整的脚本.

谢谢您的帮助 !

header('Content-Type: text/html; charset=utf-8'); 
ini_set('max_input_nesting_level','100000');
ini_set('max_execution_time','100000'); 

class crawler{

    private $url;
    private $page;
    private $bothurl;
    private $innerDom = null;
    public $prop;
    public $entry;

    function __construct($entry){
        $this->entry = $entry;
        $this->bothurl = array('http://www.remax-quebec.com/fr/inscription/Q/'.$entry.'.rmx','http://www.remax-quebec.com/en/inscription/Q/'.$entry.'.rmx');
        $this->scan();
    }

    private function scan(){
        $i =0;
        foreach($this->bothurl as $url){
            $this->url = $url;
            $this->lang = ($i==0)?'fr':'en';
            $htmlstr = (string)$this->curlGet($url);
            $dom = new DOMDocument;
            @$dom->loadHTML($htmlstr);
            $this->page = …
Run Code Online (Sandbox Code Playgroud)

php xdebug

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

REACT - defaultChecked 在第二次加载时不呈现检查属性

当我第二次访问 /view/:id 时,我的组件不会检查收音机。我开始在我的列表组件中,在站点的索引处使用react-router,我单击一个元素的视图按钮,检查单选按钮,我返回列表并转到另一个或相同的元素,它不再被检查。当我在 React 开发工具中检查组件时,无线电具有 defaultChecked=true 属性。

import React from 'react';
import { connect } from 'react-redux';

class LicenseRadios extends React.Component {
  buildRadios() {
    let { licenses, activeValue } = this.props;

    return licenses.map(license => {
      let checked = false;

      if(activeValue !== undefined && activeValue === license.id){
        checked = true;
      }

      return (
        <div key={license.id} className="col l2">
          <p>
            <input name="license" type="radio" id={'licenseRdo_' + license.id} value={license.id} defaultChecked={checked} />
            <label htmlFor={'licenseRdo_' + license.id}>{license.label}</label>
          </p>
        </div>
      );
    });
  }

  render() {
    return (
      <div …
Run Code Online (Sandbox Code Playgroud)

radio-button reactjs react-router

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

如何从 jest.setup.js 中的配置修复酶上的“语法错误:意外标识符”

我正在尝试使用 Jest 和 Enzyme 在 Typescript 中进行测试,但测试会引发 SyntaxError:

FAIL  src/_components/Button/__tests__/Button.spec.tsx
  ? Test suite failed to run

    /Users/mikaelboutin/Desktop/self/gatsby-react-intl-starter/jest.setup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme, { mount, render, shallow } from 'enzyme'
                                                                                                    ^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
Run Code Online (Sandbox Code Playgroud)

我试图包括ts-jest. 它不会解决问题。我jest.config.js根据许多文章的一些建议更改了很多次。我设置了一个 jest.preprocess.js` 来将 babel 预设传递给它。

我关注了https://github.com/facebook/jest/issues/6229但在我的项目中没有做任何事情。

我的回购在这里:https : //github.com/DWboutin/gatsby-intl-redux-typescript

开玩笑的配置文件

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': `<rootDir>/jest-preprocess.js`
  },
  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`
  },
  testPathIgnorePatterns: [`node_modules`, `.cache`, `dist`],
  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
  globals: {
    __PATH_PREFIX__: …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs jestjs enzyme gatsby

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