从React组件外部的对象访问道具

时间:2018-10-10 14:44:45

标签: reactjs

在我的React组件中,我使用了需要初始化的第三方组件。到目前为止,我在class之外进行了处理-参见下文,但是我现在需要访问此初始化内的一些道具,并且其当前位置不再起作用。

在哪里进行此初始化的合适位置?就像我说的那样,我现在需要访问该对象内的道具,因此必须移动它。我尝试将其放在constructor内,但是没有用。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ThirdPartyComponent from 'third-party-component'

const myInstance = new ThirdPartyComponent ({

   options: {
       someItem: "someValue",
       someOtherItem: this.props.something // Need to access props!
   }
});

class MyComponent extends Component {

   constructor(props) {
       super(props);
   };

   componentDidMount() {

      myInstance.on('complete', (x, y, z) => {

          // Do something
      })
   }

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

function mapStateToProps(state) {

    return {
        something: state.module.something
    }
}

function mapDispatchToProps(dispatch) {

    return {
        actions: bindActionCreators(someActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent )

componentDidMount()内部处理它-见下文-给我myInstance未定义错误。

class MyComponent extends Component {

   constructor(props) {
       super(props);
   }

   componentDidMount() {

       const myInstance = new ThirdPartyComponent ({

          options: {
              someItem: "someValue",
              someOtherItem: this.props.something
          }
       });

       this.myInstance.on('complete', (x, y, z) => {

           // Do something
       });
   }

   render() {

       return(

           <div>Hello!</div>
       );
   }
}

0 个答案:

没有答案
相关问题