Accessing Component method from outside the React app

Question

I have a React/Redux App and a component.

Unfortunately I have to use a third party library that needs to trigger functions from within the React app.

class Account extends React.Component {
  doSomething(){
    // Do react things
  }
  render{
    return()
  }
}

And now I have some HTML that I have limited control over, being inserted in to the DOM. This is not an iFrame.

<button onClick="doSomething()">interact with react</button>

Is there any way I can trigger the doSomething() method from outside of React? Something likeReactApp.Account.doSomething()is what I need.

check this question http://stackoverflow.com/questions/31612598/call-a-react-component-method-from-outside — Ruben Karapetyan, Aug 09 '16 at 08:22

score 0 · Answer 1 · edited Dec 16 '20 at 12:49

0

If I understand you correctly, the proper way to do what you want in React/Redux app is to dispatch new action to the store and register your event handling accordingly.

<button onClick="store.dispatch(createAction())">interact with react</button>

Do not try to find a way to 'hack' inside React components unless you have to. Since you already have Flux-like pattern in place, it would be bad to ignore it. Even though this method may seem slightly more complicated to set-up, as @Kovensky mentioned in comment.

edited Dec 16 '20 at 12:49

Will

4,498
2
38
65

answered Aug 09 '16 at 08:34

B.Gen.Jack.O.Neill

8,169
12
51
79

1

If he's using a bundler, `store` or `createAction` may not be available as globals. He should define a function in `window`, to be called by the `onclick`, that would do the dispatch. – Jessidhia Aug 09 '16 at 09:21

Accessing Component method from outside the React app

1 Answers1