ReactJSの他のコンポーネントで1つのコンポーネントのconstの値を設定する方法は？

Question

ボタンクリックでモーダルウィンドウを実装しています。

私の質問は、ボタンのダイアログコンポーネントonclickを表示する最善の方法です。 var modalのCSSを設定しようとしていますが、エラーが出ます。 ./src/components/btn-root.js Line 14: 'modal' is not defined no-undef

私はonclickがModal Window Componentを表示する次のボタンコンポーネントを持っています。

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import ModelDialog from './modal-dialog'; 


export default class ButtonRoot extends Component{ 
    render(){ 

     // Get the button that opens the modal 
     var btn = document.getElementById("base-btn"); 

     // When the user clicks the button, open the modal 
     btn.onclick = function() { 
      modal.style.display = "block"; 
     } 

    return (
     <button id='base-btn'>Order Credit</button> 
    ); 
    } 
} 

後、あなたの二つの質問に答えるために、モデルダイアログコンポーネント

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 


export default class ModelDialog extends Component { 
    render(){ 
    // Get the modal 
    var modal = document.getElementById('myModal'); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    return(
     <div id="myModal" className="modal"> 
     <div className="modal-content"> 
      <span className="close">&times;</span> 
      <div className="order--container"> 
       <p>5 IV's</p> 
       <p>25 IV's</p> 
       <p>50 IV's</p> 
       <p>100 IV's</p> 
       <p>500 IV's</p> 
      </div> 
      <div className="order--form"> 
       <form> 
       <div className="tc--checkbox"> 
        <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" /> 
        <label for="tcs">I accept Terms & Conditions</label> 
       </div> 
       <div className="order--btn"> 
        <button type="submit">Order</button> 
       </div> 
       </form> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

Answer 1

です：「？ReactJS内の他のコンポーネントに一つの成分のconstの値を設定する方法」

を

変数の値を小道具としてコンポーネントに変更する関数を渡します。

"私の質問は、ボタンのダイアログコンポーネントonclickを表示する最善の方法です。"

モーダルをレンダリングするかどうかを状態を使用して簡単に判断できます。 showModalのような名前を付けて、レンダー機能で行うだけです

{this.state.showModal && <YourModalComponent />}