Question

我正忙于使用ReactJS创建一个模态，并进行了维护以启动和运行基本模态。我有两个属性（show和handleClose），它们分配给Modal组件，并且正在使用带有钩子的函数。我的父文件App.js中有两个p标签（子标签），如下所示，

<Modal show={mod} handleClose={hideModal} >
              <p>Modal</p>
              <p>Data</p>
            </Modal>

我想像对show和handleClose属性一样，将p标签作为道具传递给我的Modal组件。我的问题是，如何通过功能和挂钩将子标签传递给组件？

下面是我的完整工作代码，文件App.js，

import React, {useState} from 'react';
import './App.css';
import Modal from './Modal';

function App() {
  const[mod, setMod] = useState(false);
  
  const showModal = () =>{
      setMod(true)
  }

  const hideModal = () =>{
    setMod(false)
  }
  
  return (
      <div>
        <h1 >My React modal</h1>
        <Modal show={mod} handleClose={hideModal} >
          <p>Modal</p>
          <p>Data</p>
        </Modal>
        <button type="button" onClick={showModal}>Show modal</button>
      </div>
  );
}

export default App;

Modal.js，

import React from 'react';
import './App.css';

function Modal (props) {
    
        return (
            <ShowModal show={props.show} handleClose={props.handleClose}/>
        );    
}

function ShowModal (props){ 
   const showHideClassName = props.show ? 'modal display-block' : 'modal display-none';
    
   return (
        <div className={showHideClassName} onClick={props.handleClose}>
            <section className="modal-main">
                {props.children}
                <button onClick={props.handleClose}>Close</button>
            </section>
        </div>
   );
}

export default Modal;

App.css

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

  .modal-main {
    position:fixed;
    background: white;
    width: 80%;
    height: auto;
    top:10%;
    left:50%;
    transform: translate(-50%,-50%);
  }

.display-block {
  display: block;
}

.display-none {
  display: none;
}

Answer 1

在使用“钩子和函数”时传递道具的工作方式类似于“类组件”。

您无法查看Modal的子道具，是因为您试图在ShowModal中访问它们，而ShowModal组件本身没有任何子代。因此，您需要将从App.js的Modal Component收到的子级道具传递给ShowModal的

。

解决方案：

将ShowModal组件更改为下面的

<ShowModal show={props.show} handleClose={props.handleClose}>
  {props.children}
</ShowModal>

Answer 2

建议：您必须进行一些道具钻孔。不要在一些小的用例中溢出代码，这会使传递道具的工作变得困难。

只需将props.children的Modal包裹在ShowModal组件中，并在从props.children调用ShowModal时，它也会被传递给它。

代码：

//Modal
function Modal (props) {
    
        return (
            <ShowModal show={props.show} handleClose={props.handleClose}>
              {props.children}
            </ShowModal>
        );    
}
//============================================
//or for short
 function Modal (props) {
    
        return (
            <ShowModal {...props}/> {/*As you don't have other props to use in Modal just pass with spread operator & that will pass all the props available to ShowModal*/}
        );    
}

Answer 3

我建议ShowModal可以作为Modal单独使用。
通过添加paragraphOne和paragraphTwo作为条件道具，您可以找到解决方案，而无需在将来的情况下要求它们。

代码建议：

import React from 'react';
import './App.css';

function Modal (props){ 
   const showHideClassName = props.show ? 'modal display-block' : 'modal display-none';
    
   return (
        <div className={showHideClassName} onClick={props.handleClose}>
            <section className="modal-main">
                {props.paragraphOne && (
                  <p>{props.paragraphOne}</p>
                )}

                {props.paragraphTwo && (
                  <p>{props.paragraphTwo}</p>
                )}

                {props.children}
                <button onClick={props.handleClose}>Close</button>
            </section>
        </div>
   );
}

export default Modal;

将子标签作为道具传递给功能中的组件

3 个答案: