Магазин потоков/альтов FindDOMNode

Я пытаюсь получить доступ к узлу dom из хранилища (используя alt), чтобы анимировать с помощью velocity.js, однако получаю только «невозможно прочитать свойство неопределенного». Можно ли использовать findDOMNode из хранилища alt/flux?

import React from 'react'
import alt from '../_alt';
import Actions from '../actions/actions';
import Velocity from 'velocity-animate/velocity';
import Body from '../modules/level_1/body/body1'


class Store {

  constructor(){

    this.bindListeners({
      menuToggle: Actions.MENU_TOGGLE
    });

    this.menuStatus = false

  }

  menuToggle(){
    if (!this.menuStatus){ 
      this.menuStatus = true;
      Velocity(React.findDOMNode(Body.refs.wrap),({ width: '50px' }), 50) 
    } else {
      this.menuStatus = false;
    }
  }

}

export default alt.createStore(Store, 'Store');

Составная часть:

import React from 'react';
import connectToStores from 'alt/utils/connectToStores';
import Store from '../../../stores/store'
import Actions from '../../../actions/actions';
import Styles from './body1.css';


import Hero from '../../objects/hero/full_width' 

let image = ['../../../../assets/full_width1.jpg', 'image']

@connectToStores
export default class Body extends React.Component {

  static getStores(){
    return [Store];
  }

  static getPropsFromStores(){
    return Store.getState();
  }

    render(){
        return (
            <div ref='wrap'>
                <Hero content={image} />
            </div>
        );
    }

}

person Boyswan    schedule 02.07.2015    source источник


Ответы (2)


Тело — это реактивный класс, у которого нет ссылок. Что вам нужно, так это элемент реакции (экземпляр класса реакции), который является «этим» внутри рендеринга, componentDidMount и т. д.

Вам нужно будет каким-то образом предоставить элемент реакции в хранилище (возможно, вызвав menuToggle с фактическим элементом реакции).

В качестве альтернативы вы можете использовать componentDidMount, чтобы установить ссылку на класс Body, чтобы переключатель мог ее использовать.

person Piercey4    schedule 07.07.2015

Шаблон, который я использовал с некоторым успехом, заключается в создании действия инициализации, которое принимает в качестве одного из своих аргументов компонент React. Затем в componentDidMount() вы можете вызвать это действие, передав this в качестве аргумента. Это позволяет вашему магазину иметь дескриптор этого элемента React, а также всех связанных с ним свойств, чтобы вы могли делать такие вещи, как React.findDOMNode(component.refs['someref']).

person jaredkwright    schedule 02.09.2015