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

Question

假设我正在从 index.js 调用一个组件，并且同一组件是从另一个文件中调用的，该文件在 return 值内具有一组完全不同的道具。下面的图像是两个文件和组件本身。 Modal 组件依赖于 Home 组件的 toggle 状态。它只会在切换为真时呈现，这由 Home Component 中的按钮控制。请记住，我在 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() 您的 return 模式中，但没有对此进行任何处理。它没有被插入到 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

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

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

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

Is it possible to pass different props from two different files in React?

reactjs

components

rendering

render

react-component