是否可以在 React 中从两个不同的文件传递不同的 props？

Question

假设我从 index.js 调用一个组件，并且从另一个文件中调用同一个组件，并且返回值中包含一组完全不同的 props。下图是两个文件和组件本身。 Modal 组件依赖于 Home 组件的 toggle 状态。它仅在切换为 true 时才会渲染，这是由 Home 组件中的按钮控制的。请记住，我正在 App.js 和 Home.js 中渲染模态组件

**这是更现实情况的一个小演示。

运行此应用程序后，模态组件根本不渲染。 那么问题是为什么内部会发生这种情况以及如何解决这种情况？

                import React, {useState} from 'react'
                import logo from './logo.svg';
                import './App.css';
                import Home from './components/Home';
                import Modal from './components/Modal';

                function App() {

                  const [logoR, setLogoR] = useState(logo);
                  const [currDate, setCurrDate] = useState(new Date());

                  console.log(currDate);

                  return (
                    <div className="App">
                      <header className="App-header">
                        <img src={logoR} className="App-logo" alt="logo" />
                        <p>
                          Edit <code>src/App.js</code> and save to reload.
                        </p>
                        <a
                          className="App-link"
                          href="https://reactjs.org"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          Learn React
                        </a>
                        <Home/>
                        <Modal logoR={logoR} currDate={currDate} />
                      </header>
                      
                    </div>
                  );
                }

                export default App;

Github 仓库 - React-props

Answer 1

在您的 handleClick() 中，您返回了 Modal，但没有对此进行任何操作。它没有被插入到 DOM 的任何地方。

像这样的事情可能会让你们更亲近。

import React, {usestate} trom 'react' 7.2K (gzipped: 3K)
import Modal from './Modal';
const Home = () => {
 const [toggle, set Toggle] = usestate(false);
 console.log(toggle);
                                
 const handleclick () => {
   setToggle(!toggle); 
    
 }
 return (
   <div>
        <button
            className="App-button"
            onclick={handleclick)>
            whats up!
        </button>
        <Modal toggle={toggle} />
   </div>
}
export default Home

如果您有一个想要从应用程序的各个部分触发的模式，我建议您检查反应门户。他们有一个很好的例子来说明如何将其与模式一起使用。

https://reactjs.org/docs/portals.html