在现有的Web项目中隐藏React组件

Question

I'm currently trying to integrate a React component into a legacy web project (a huge html index file and some js scripts using mostly jquery).

I am trying to add the rendered react component into a separate tab. Now the problem is that I cannot control the visibility of the top level React component.

Say I have the following src code in html:

...
<div id="wrapper">
    <div id="react-component"></div>
</div>
...

I render the inner component using React. Now is there any way to control the visibility of either "#wrapper" or "#react-component" ? jquery does not help.

I am relatively new to React and it seems that integrating it into old project can be a huge pain.

Answer 1

I render the inner component using React. Now is there any way to control the visibility of either "#wrapper" or "#react-component" ?

Well those are two different worlds.

For the #wrapper you can just use DOM manipulation like $.hide() and $.show() or however you'd normally do it in jQuery.

For the #react-component you need to call ReactDOM.render() , and you can pass in a visible prop to change the visibility of the rendered elements. Something like:

ReactDOM.render(
  <MyComponent visible={isReactComponentVisible} />, 
  document.getElementById("react-component")
);

Now your React component can show or hide itself however you want.

class MyComponent extends React.Component {
  render() {
    return (
      <div style={{ display: this.props.visible ? "block" : "none" }}>
        ...
      </div>
    )
  }
}

Of course its up to you to call ReactDOM.render() anytime that isReactComponentVisible changes. A formal state binding library like Redux could help you here, if the complexity warrants it.

Remember that React will diff the renders so calling ReactDOM.render() is not rebuilding the entire component's DOM (as jQuery would be), just what changed (ie the DOM effected by the visible prop: the style.display attribute.)

Answer 2

Create a js file and export a default function to help you rendering react components.

Like this

import React from 'react';
import ReactDOM from 'react-dom';
export default function(component, container , props = {}, callback){      

    React.createElement(component , props);
    ReactDOM.render(component, container, callback);

}

Your component will look like this

import React,{PropTypes} from 'react';

class MySampleComponent extends React.Component{

   static propTypes ={
      hide : PropTypes.bool
   }
   static defaultProps= {
      hide : false
   }

   render(){
      return(
         <div style={display : this.props.hide : 'none' : 'block'}> </div>

      );



   }

}

Import the above function to render your component in js file which you will add in index.html

import render from './pathto/RenderHelper'
import MyComponent from './MyComponent' 

class IndexPage {

  constructor(){
     this.renderUI();
  }

  renderUI(){
    var container = document.getElementById('react-component');
    render(MyComponent, container, {hide : false});
  } 
}

Note you need to add your page.index.js file to webpack.config.js entry so that webpack can compile it, like this.

entry: { page.index : 'location/to/page.index.js' }

Hope this helps.