javascript

java

python

c#

android

node.js

c++

reactjs

php

html

jquery

css

.net

ios

git

ruby-on-rails

sql

c

string

ruby

javascript-更新redux中的嵌套数据

使用Redux更新商店中嵌套数据数组的最佳/正确方法是什么?

我的商店看起来像这样:

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

我有一对异步操作来更新完整的items对象,但是我还有另一对操作要更新特定的links数组。

我的减速器当前看起来像这样,但是我不确定这是否是正确的方法:

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
      // TODO: check whether the following is acceptable or should we create a new one?
      state.items[action.resourceTypeId].isSourceOf.push(action.resourceTypeLink);
      return Object.assign({}, state, {
        items: state.items,
      });
  }
trans by 2020-02-29T15:12:13Z

javascript-Travis / Jest:TypeError:无法分配为对象'#<process>'的只读属性'Symbol(Symbol.toStringTag)'

我的所有jest typescript测试都在我的travis管道中失败,并抛出以下错误:

TypeError: Cannot assign to read only property 'Symbol(Symbol.toStringTag)' of object '#<process>'

突然发生了,我没有更改代码中的任何特定内容。 在本地,一切正常。

任何想法可能会发生什么?

trans by 2020-02-23T02:38:05Z

javascript-如何获取新数据以响应Redux对React Router的更改?

我正在使用Redux,redux-router和reactjs。

我正在尝试制作一个用于获取路线更改信息的应用程序,因此,我会遇到以下问题:

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

当有人输入artist/<artistId>时,我想搜索艺术家,然后呈现信息。 问题是,这样做的最佳方法是什么?

我已经找到了一些答案,可以使用RxJS或尝试使用中间件来管理请求。 现在,我的问题是,这真的必要吗?还是保持体系结构不可知的一种方法? 我可以直接从react componentDidMount()和componentDidUpdate()获取我需要的信息吗? 现在,我通过在那些请求信息的功能中触发一个动作来执行此操作,并且当信息到达时组件会重新渲染。 该组件具有一些让我知道的属性:

{
    isFetching: true,
    entity : {}
}

谢谢!

trans by 2020-02-22T18:24:57Z

reactjs-在构造函数或componentWillMount中设置初始React组件状态?

在React组件中,最好是在Constructor()或componentWillMount()中设置初始状态?

export default class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this.setState({key: value});
  }
}

要么

export default class MyComponent extends React.Component{
  componentWillMount(props){
    this.setState({key: value});
  }
}
trans by 2020-02-22T01:16:30Z

javascript-如何用玩笑和酶模拟React组件方法

我有一个react组件(为了演示这个问题而简化了):

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

现在,我要测试 at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15) at run_xhr (node_modules/browser-request/index.js:215:7) at request (node_modules/browser-request/index.js:179:10) at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68) at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45) at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24) 是否使用提供的值调用searchDish

为了做到这一点,我想创建一个代替组件方法的笑话模拟函数。

到目前为止,这是我的测试用例:

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

但是我在控制台中得到的只是 at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15) at run_xhr (node_modules/browser-request/index.js:215:7) at request (node_modules/browser-request/index.js:179:10) at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68) at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45) at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

语法错误

  at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
  at run_xhr (node_modules/browser-request/index.js:215:7)
  at request (node_modules/browser-request/index.js:179:10)
  at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
  at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
  at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

所以我的问题是,如何正确地用酶模拟组分方法?

trans by 2020-02-21T22:23:08Z

reactjs-安全地替代危险地设置内部HTML

我想在我的网站(使用React)上创建一个动态博客。 最初,我打算将原始HTML中的帖子存储在数据库中,并使用危险地设置内部HTML生成内容。 但是,我对安全隐患感到关注。 尽管我的应用程序没有任何敏感数据,但我对XSS并不十分熟悉,无法知道我可能会打开应用程序的所有危险。

我很好奇是否存在一种在我的应用程序中动态加载博客页面的高效,安全的方法。 在这种情况下,使用[https://github.com/odysseyscience/react-router-proxy-loader]有用吗? 有一个与我的应用程序其余部分分开的博客文章JSX文件夹,并使用此文件夹加载(诚然,我不确定react-router-proxy-loader的工作方式)。

我愿意提出建议。

谢谢,

凯文

trans by 2020-02-21T15:50:38Z

javascript-崇高反应代码的语法突出显示

我开始用崇高的文字编写一些基本的React代码。 这是我的语法突出显示的样子。 其部分突出。 我可以使用任何建议的Sublime插件来查看完整的语法突出显示吗?

enter image description here

import React, { Component } from 'react'
import { connect } from 'react-redux'   // <-- is the glue between react and redux
import { bindActionCreators } from 'redux'
import { selectBook } from '../actions/index'

// there is no intrinsic connection between React and Redux
// they are two seperate libraries
// they are connected using a seperate library called ReactRedux

// container? its a React component that hasa direct connection to state managed by Redux
class BookList extends Component {

    constructor(props) {
        super(props)
        //this.props = props;
    }

    renderList() {
        return this.props.books.map((book) => {
            return (
                <li key={book.title} className="list-group-item">{book.title}</li>
            )
        })
    }

    render() {
        return (
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        )
    }

}

// function is the glue between react and redux
function mapStateToProps(state) {
    // Whatever gets retrieved from here will show up as props inside
    // of book-list

    return {
        books: state.books
    }
}

// anything returned from this function will end up as props on the BookList container
function mapDispatchToProps(dispatch) {
    return bindActionCreators({selectBook: selectBook}, dispatch)
}

// Promote BookList from a component to a container - it needs to know
// about this new dispatch method, selectBook. Make it available as a prop
export default connect(mapStateToProps, mapDispatchToProps)(BookList);

编辑:[修复了一些不正确的语法,添加了代码文本]

trans by 2020-02-20T23:25:41Z

reactjs-运行create-react-app构建脚本时如何设置build .env变量?

我在create-react-app中使用以下环境变量:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我通过阅读npm run build文件运行package.json时,它可以工作:

REACT_APP_API_URL=http://localhost:5555

执行npm run build时如何设置不同的值,例如package.json

这是我的package.json文件:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
trans by 2020-02-20T11:18:50Z

CSS3-如何在Reactjs中将供应商前缀应用于内联样式?

React中的CSS属性不会自动添加其供应商前缀。

例如,使用:

<div style={{
    transform: 'rotate(90deg)'
}}>Hello World</div>

在Safari中,不会应用旋转。

我该如何完成?

trans by 2020-02-19T05:21:47Z

reactjs-使用react-rou登录后自动重定向

我想在我的react / react-router / flux应用程序中建立一个Facebook登录名。我在登录事件上注册了一个侦听器,并且希望将用户重定向到'/dashboard'(如果他们已登录)。该怎么办? location.push效果不佳,除非完全重新加载了页面。

trans by 2020-02-18T20:37:50Z

reactjs-React-Redux:合并化简器:意外的键

在开始组合Redux减速器之前,我的应用程序运行良好。 但是当我合并时,initialState和reducer键混合在一起了。

function flash(state = [], action) {
  switch (action.type) {
  case FLASH_MESSAGE_UPDATED:
    return _.extend({}, state, { flash: action.flash })
  default:
    return state
  }
}

function events(state = [], action) {
  switch (action.type) {
  case EVENTS_UPDATED:
    return _.extend({}, state, { events: action.pathway_events })
  default:
    return state
  }
}

export default combineReducers({
  events,
  flash
})

这会导致功能中断和控制台错误:

Unexpected keys "one", "two" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "events", "flash". Unexpected keys will be ignored.

我的初始状态是通过redux-thunk传递的。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../../reducers/event'

let initialState = {
  one: globalData.one,
  two: globalData.two,
  events: globalData.events,
  flash: globalData.flash
}
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
let reduxStore = createStoreWithMiddleware(reducer, initialState);

React.render(
  <Provider store={reduxStore}>
    <EventListContainer />
  </Provider>,
  $('.events')[0]
)

如何正确组合减速器?

trans by 2020-02-18T17:21:27Z

内存-在s中向数组添加值的最佳方法是什么

我有一个状态数组,比如this.state.arr。我想向此状态属性添加一些内容,然后更改更多属性。

选项1

onChange(event){
    this.state.arr.push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

选项2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

所以..我知道this.state应该被视为不可变的。 但是可以像在选项1中那样使用它还是可以设置状态的呢?还是我需要使用像选项2这样的东西,因此总是先在内存中进行复制

trans by 2020-02-17T23:30:34Z

javascript-React componentDidMount不触发

我建立了一个新的react项目,由于某种原因,没有调用componentDidMount方法。

我已通过在componentDidMount中拨打componentDidMount来验证此行为,但在控制台中看不到它的输出。

此外,componentDidMount无法正常工作。

关于为什么不致电componentDidMount,我感到很困惑。 我尝试同时使用React“ v0.14.0”和“ v0.14.3”。

为什么不调用“ componentDidMount”?

码:

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;
trans by 2020-02-17T12:35:52Z

javascript-在ReactJS中更新数组中对象的最佳方法是什么?

如果您将数组作为状态的一部分,并且该数组包含对象,那么通过更改其中一个对象来更新状态的简单方法是什么?

示例,从关于react的教程中修改而来:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}
trans by 2020-02-16T22:19:05Z

javascript-如何正确捕获React.js中文本输入的change / focusOut事件?

我有一个表单,我想在其中处理文本输入的更改事件,但是React onChange在按下按键时触发(与本机JS相反,当输入字段失焦时会触发更改事件)。

有React方式来做我想要的吗?

trans by 2020-02-16T05:19:44Z

reactjs-React:为什么组件的构造函数只被调用一次?

在以下示例中,当单击Item 2时,显示的是Second 1,而不是Second 2。为什么? 您将如何解决?


var guid = 0;

class Content extends React.Component {
  constructor() {
    guid += 1;
    this.id = guid;
    console.log('ctor', this.id); // called only once with 1
  }
  render() {
    return (
      <div className="content">
        {this.props.title} - {this.id}
      </div>
    );
  }
}

class MyApp extends React.Component {
  constructor() {
    this.items = ['Item 1', 'Item 2'];
    this.state = {
      activeItem: this.items[0]
    };
  }
  onItemClick(item) {
    this.setState({
      activeItem: item
    });
  }
  renderMenu() {
    return (
      <div className="menu">
        <div onClick={this.onItemClick.bind(this, 'Item 1')}>Item 1</div>
        <div onClick={this.onItemClick.bind(this, 'Item 2')}>Item 2</div>
      </div>
    );
  }
  renderContent() {
    if (this.state.activeItem === 'Item 1') {
      return (
        <Content title="First" />
      );
    } else {
      return (
        <Content title="Second" />
      );
    }
  }
  render() {
    return (
      <div>
        {this.renderMenu()}
        {this.renderContent()}
      </div>
    );
  }
}
trans by 2020-02-16T01:18:22Z

javascript-如何在React / Jsx中调用渲染器中的函数

我想在一些嵌入式html中调用一个函数。 我尝试了以下操作,但未调用该函数。 这是在render方法中调用函数的错误方法吗?

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}
trans by 2020-02-15T13:32:43Z

javascript-在R中导入JSON文件

我是React的新手,正在尝试从外部文件导入JSON DATA变量。 我收到以下错误:

找不到模块“ ./customData.json”

有人可以帮我吗? 如果我在index.js中具有我的DATA变量,则可以使用,但是当它位于外部JSON文件中时,它不可用。

index.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));
hobbies.js
import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  } 
});

export default Hobbies;
profile.js
import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile
customData.json
var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA
trans by 2020-02-15T05:21:09Z

javascript-使用reactjs和typescript的typesafe select onChange事件

我已经弄清楚了如何使用事件的丑陋转换将事件处理程序绑定到SELECT元素上。

是否可以以类型安全的方式检索值而无需强制转换为任何值?

import React = require('react');

interface ITestState {
    selectedValue: string;
}

export class Test extends React.Component<{}, ITestState> {

    constructor() {
        super();
        this.state = { selectedValue: "A" };
    }

    change(event: React.FormEvent) {
        console.log("Test.change");
        console.log(event.target); // in chrome => <select class="form-control" id="searchType" data-reactid=".0.0.0.0.3.1">...</select>

        // Use cast to any works but is not type safe
        var unsafeSearchTypeValue = ((event.target) as any).value;

        console.log(unsafeSearchTypeValue); // in chrome => B

        this.setState({
            selectedValue: unsafeSearchTypeValue
        });
    }

    render() {
        return (
            <div>
                <label htmlFor="searchType">Safe</label>
                <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <h1>{this.state.selectedValue}</h1>
            </div>
        );
    }
}
trans by 2020-02-15T02:35:52Z

javascript-在React中使用immutability-helper设置变量对象键

我有一个要在React中编写的函数。 在我的课堂上,我有一个状态对象immutability-helper,看起来像这样:

this.state = {
  step: 1,
  fields: {
    type: '',
    name: '',
    subtype: '',
    team: '',
    agreement: ''
  }
};

我具有使用immutability-helper分配这些键的各种功能,这些功能通常如下所示:

assignType(attribute) {
  var temp = update(this.state.fields, {
    type: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

我想做的是使用更通用的函数并执行以下操作:

assignAttribute(field, attribute) {
  var temp = update(this.state.fields, {
    field: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

但是,这不起作用。 如何使用immutability-helper使用可变键?

trans by 2020-02-12T22:36:39Z

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 下一页 共145页