如何在 ReactJS 的另一个组件中设置一个组件的 const 值？

Question

我在单击按钮时实现模态 window。

我的问题是单击按钮时显示对话框组件的最佳方式是什么。我正在尝试设置 var modal 的 CSS，这给了我错误。 ./src/components/btn-root.js Line 14: 'modal' is not defined no-undef

我有以下按钮组件，onclick 将在其上显示模态 Window 组件。

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

回答你的两个问题：

"how to set value of const of one component in other component in ReactJS?"

将更改变量值的函数作为 props 传递给组件。

"My question is what is the best way to display dialog component onclick of the button."

您可以简单地使用状态来决定是否呈现模态。您可以命名为 showModal，然后在您的渲染函数中执行

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

如何在 ReactJS 的另一个组件中设置一个组件的 const 值？

how to set value of const of one component in other component in ReactJS?

reactjs

jsx

react-props