Question

我尝试从商店访问dom节点（使用alt）以使用velocity.js进行动画处理，但是我只能读取未定义的属性＆＃39;。是否可以使用alt / flux商店中的findDOMNode？

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>
        );
    }

}

Answer 1

Body是一个反应类，它没有refs。你需要的是一个react元素（一个react类的实例），它是render，componentDidMount等中的“this”。

您必须以某种方式向商店提供react元素（可能通过使用实际的react元素调用menuToggle）。

或者，您可以使用componentDidMount在Body类上设置ref，以便切换可以使用它。

Answer 2

我已经成功使用的模式是创建一个初始化操作，该操作将React组件作为其参数之一。然后在componentDidMount()中，您可以调用该操作，将this作为参数传递。这允许您的商店拥有该React元素的句柄及其所有相关属性，因此您可以执行React.findDOMNode(component.refs['someref'])之类的操作。

FindDOMNode flux / alt商店

2 个答案: