Question

我目前正在尝试将React组件集成到遗留Web项目中（一个巨大的html索引文件和一些主要使用jquery的js脚本）。

我正在尝试将呈现的react组件添加到单独的选项卡中。现在的问题是我无法控制顶级React组件的可见性。

假设我在html中有以下src代码：

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

我使用React渲染内部组件。现在有没有办法控制＆＃34; #wrapper＆＃34;的可见性。或＆＃34;＃react-component＆＃34; ？ jquery没有帮助。

我对React比较陌生，似乎将它整合到旧项目中可能是一个巨大的痛苦。

Answer 1

我使用React渲染内部组件。现在有没有办法控制＆＃34; #wrapper＆＃34;的可见性。或＆＃34;＃react-component＆＃34; ？

那些是两个不同的世界。

对于#wrapper，您可以使用$.hide()和$.show()之类的DOM操作，或者您通常在jQuery中执行此操作。

对于您需要致电#react-component的{{1}}，您可以传递ReactDOM.render()道具来更改已渲染元素的可见性。类似的东西：

visible

现在你的React组件可以随意显示或隐藏自己。

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

当然，由class MyComponent extends React.Component { render() { return ( <div style={{ display: this.props.visible ? "block" : "none" }}> ... </div> ) } }更改时，您可以随时致电ReactDOM.render()。如果复杂性需要，像Redux这样的正式状态绑定库可以帮到你。

请记住，React会对渲染进行区分，因此调用isReactComponentVisible 而不是重建整个组件的DOM（就像jQuery一样），只是改变了（即DOM影响了）通过ReactDOM.render()道具：visible属性。）

Answer 2

创建一个js文件并导出一个默认函数，以帮助您渲染反应组件。

喜欢这个

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);

}

您的组件将如下所示

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>

      );



   }

}

导入上述函数以在js文件中呈现您将在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});
  } 
}

请注意，您需要将page.index.js文件添加到webpack.config.js条目，以便webpack可以编译它，就像这样。

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

希望这有帮助。

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

2 个答案: