如何调用react js函数或传递参数以从普通JS / HTML响应js？

Question

I am developing a web app where I need to do certain things in React JS. I have written the react js code.

But I want it to be called only when a button is clicked. How to do this?

I read the tutorial but still couldn't figure out this.

Please help me. Struck for 2 hours.

Answer 1

If you wish to render a <ReactComponent/> at <div id="mountPoint"></div> using a button click and wish to pass an Object data to React, this should solve your problem.

The button below is not rendered using React. There must also be a mount point specified beforehand where React will mount the <ReactComponent/> :

<button onclick=ReactRender()> Render React </button>
<div id="mountPoint"></div>

The button calls a function ReactRender() which does all the rendering.

//Now to render React
var ReactRender = function(){
  // data is an Object which you wish to pass to React
  ReactDOM.render(<ReactComponent data={data}></ReactComponent>, mountPoint);
}

The data you have passed from outside React will be available as this.props.data inside ReactComponent .