Ответы пользователя по тегу React
  • Как реализовать анимацию внутри компонента React?

    STJ
    @STJ
    Front-end developer
    Используйте либу react-motion.
    import {Motion, spring} from 'react-motion';
    
    <Motion style={{x: spring(this.state.open ? 400 : 0)}}>
              {({x}) =>
                <div className="demo0">
                  <div className="demo0-block" style={{
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }} />
                </div>
              }
            </Motion>
    Ответ написан
  • Почему не работает redux-logger в изоморфном приложении?

    STJ
    @STJ Автор вопроса
    Front-end developer
    Решилось проверкой "если браузер".
    import { compose, createStore, combineReducers, applyMiddleware } from 'redux';
    import createLogger from 'redux-logger';
    import * as reducers from './reducers';
    import promises from './middlewares/promises';
    
    const reducer = combineReducers(reducers);
    let store = {};
    
    if(process.browser) {
      const logger = createLogger();
      const finalCreateStore = compose(
        applyMiddleware(promises, logger)
      )(createStore);
      store = finalCreateStore(reducer);
    } else {
      const finalCreateStore = compose(
        applyMiddleware(promises)
      )(createStore);
      store = finalCreateStore(reducer);
    }
    
    export default store;
    Ответ написан
  • Как имплементировать React.Navigation в компонент?

    STJ
    @STJ Автор вопроса
    Front-end developer
    Решение.
    В компоненте достать из контекста инстанс роутера.

    static contextTypes = {
        router: Router.PropTypes.object.isRequired
    }


    Потом в копоненте роутер будет доступен в компоненте и его можно использовать так
    this.contex.router.transitionTo("/");

    Если у кого-то тесты падают с ошибкой на синтаксис и указыют на знак = (равно) в static методе, то нужно добавить параметр stage=0 в загрузчике babel
    loaders: [
              { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0' },
            ]
    Ответ написан
    Комментировать
  • Как тестировать формы ReactJs?

    STJ
    @STJ Автор вопроса
    Front-end developer
    Незнаю, хардкод или нет. Но решил следующим кодом
    it("Do login process", function() {
    		let Subject = StubRouterContext(Login);
    		let login = TestUtils.renderIntoDocument(<Login />);
    
    		let button = TestUtils.findRenderedDOMComponentWithTag(login, 'button');
    		let inputs = TestUtils.scryRenderedDOMComponentsWithClass(login, 'form-control');
    
        inputs[0].getDOMNode().value = "input0";
        inputs[1].getDOMNode().value = "input1";
    
    		TestUtils.Simulate.change(inputs[0].getDOMNode());
    		TestUtils.Simulate.change(inputs[1].getDOMNode());
    
    		expect(inputs[0].getDOMNode().value).to.be.equal('input0');
    		expect(inputs[1].getDOMNode().value).to.be.equal('input1');
    	});
    Ответ написан
    Комментировать