既存のWebプロジェクトでReactコンポーネントを非表示にする

Question

現在、Reactコンポーネントを従来のWebプロジェクト（巨大なhtmlインデックスファイルと、主にjqueryを使用するいくつかのjsスクリプト）に統合しようとしています。

レンダリングされた反応コンポーネントを別のタブに追加しようとしています。問題は、トップレベルのReactコンポーネントの可視性を制御できないことです。

は、私はHTMLで次のsrcコードを持って言う：

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

私が反応使用して、内部コンポーネントをレンダリングします。今、 "＃wrapper"または "＃react-component"の可視性を制御する方法はありますか？ jqueryは役に立ちません。

私はReactに比較的新しいです。古いプロジェクトに統合することは、大きな苦痛になる可能性があります。

Answer 1

私はReactを使用して内部コンポーネントをレンダリングします。今、 "＃wrapper"または "＃react-component"の可視性を制御する方法はありますか？

さて、これらは2つの異なる世界です。

#wrapperの場合は、$.hide()と$.show()のようにDOM操作を使用できますが、通常はjQueryで行います。

#react-componentの場合は、ReactDOM.render()に電話する必要があります。visibleプロップを渡して、レンダリングされた要素の表示を変更することができます。次のようなものがあります：

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

いつでもisReactComponentVisible変更することをReactDOM.render()を呼び出すためにあなたにそのアップ。複雑さがそれを保証するならば、Reduxのような正式な状態拘束ライブラリがここにあなたを助けるかもしれません。

：

ことが反応を覚えておいてくださいので（。style.display属性visible小道具によってもたらさすなわちDOM）に変更まさに、コンポーネント全体のDOMを（jQueryのだろうと）再構築ReactDOM.render()がない呼び出すレンダリングdiffをします

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> 

    ); 



    } 

} 

インポートのようにあなたがindex.htmlの中に追加するJSファイルにコンポーネントをレンダリングするために上記の機能を見ていきます

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

webpack.config.jsエントリにpage.index.jsファイルを追加する必要があるので、webpack caこれをコンパイルしてください。

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

希望します。