ReactJS의 다른 구성 요소에서 한 구성 요소의 const 값을 설정하는 방법은 무엇입니까?

Question

버튼 클릭시 모달 창을 구현 중입니다.

제 질문은 대화 상자 구성 요소 onclick을 표시하는 가장 좋은 방법입니다. var modal의 CSS를 설정하려고하는데 오류가 발생합니다. ./src/components/btn-root.js Line 14: 'modal' is not defined no-undef

다음 버튼 구성 요소에 onclick이 모달 윈도우 구성 요소를 표시합니다. 다음

이

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