CODEWITHSUNDEEP
reactjs
Howard
Howard

Reputation: 4604

How React Component expose data to external app?

Let's say i have a React Component <forecast id="test"/>. And i want import this component into a legacy project which only have jquery involved.

Is it possible to get the value of this component like document.querySelector('#test').value?

I got some information from React website, that we cannot access data from outside the component. The recommended way is dispatching data from inside of the component.

My question is, the way to dispatching data is behind of the component implementation. Is it means that i have to read the source code of component in case i don't know how it works?

If this is true, i won't think React is free to inject to any product, it cost too much.

Upvotes: 1

Views: 742

Answers (2)

gyzerok
gyzerok

Reputation: 1428

If you want to inject some React to your project you should do it with some independent part of your system. If you have tightly coupled code base its always high cost to add any new technology to it. So its not a React problem. Try to find some independent module or subapplication in your system and move it to React. If you cannot find one, try to refactor existing code first.

Upvotes: 1

vkurchatkin
vkurchatkin

Reputation: 13570

You need to write a plain JS wrapper to do it. Something like this might work

function Forecast(element) {
   this.value = initialValue;
   React.render(<forecast onChange={onChange.bind(this)}/>, element);

   function onChange(newValue) {
     this.value = newValue;
   }

}

Upvotes: 0

Related Questions