Question

我有一个App组件，女巫包含两个孩子：一个导航栏和一个容器。当我单击导航栏上的li时，我正在通过父组件传递反应组件，但它不会出错。

应用程序：

function App() {
  const [appState, setAppState] = useState();

    useEffect(() => {
      console.log(appState);
    }, [appState])

  return (  
    <div className="App">
      <Nav stateSetter={setAppState}/>
      <Container state={appState}/>
    </div>
  );
}

导航栏：

function Nav(props) {
    return (
        <div>
            <div className="Nav" id="nav">
                <nav>
                    <ul>
                        <li><button><span>App</span></button></li>
                        <li><button onClick={() => props.stateSetter("")}>Home</button></li>
                        <li><button onClick={() => props.stateSetter("")}>Products</button></li>
                        <li><button onClick={() => props.stateSetter("")}>About Us</button></li>
                        <li><button onClick={() => props.stateSetter(<Login />)}>Log in</button></li> 
                    </ul>
                </nav>
            </div>
        </div>
    );
}

我只通过登录名来登录。

容器：

function Container(props) {
    const [renders, setRenders] = useState(props.state);
    console.log(renders);
    return (
        <div>
            <div className="container">
                {renders}
            </div>
        </div>
    );
}

Answer 1

状态在渲染过程中为“相同”组件保留，这是其主要目的。当您执行useState时，可以传递状态的初始值，但是此后只能使用setState函数来更改状态。因此，在第一次渲染时，您的Container已将renders设置为undefined（父级传递的初始属性值）。稍后传递此props.state道具时，不会改变您的状态。

为此，您应考虑不使用Container中的状态，并允许父级对其进行控制；如果Container需要更改道具，则可以改用回调：

function Container({ state: content }) {
    return (
        <div>
            <div className="container">
                {content}
            </div>
        </div>
    );
}

Answer 2

react具有一个内置的道具，用于将组件传递给孩子props.children 您可以按原样将组件传递给该道具

<Child><h1>passing text</h1></Child>

您可以像这样

从孩子那里访问它

return (
  <div>{props.children}</div>
)

Answer 3

尽管其他答案可以解决您的问题，但传递组件以浏览应用程序将变得凌乱且难以在其之上进行构建。您应该考虑的另一种方法是使用React Router来为您处理组件的呈现。

使用此软件包，您的代码将如下所示：

应用程序：

// Node Modules
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

// Page Components
import Home from './Home';
import About from './About';
import Products from './Products';
import Login from './Login';

function App() {
  const [appState, setAppState] = useState();

  useEffect(() => {
    console.log(appState);
  }, [appState])

  return (  
    <div className="App">
      <Nav stateSetter={setAppState}/>
      <Router>
        <Route to="/" component={Home} />
        <Route to="/about" component={About} />
        <Route to="/products" component={Products} />
        <Route to="/login" component={Login} />
      </Router>
    </div>
  );
}

导航栏：

// Node Modules
import {Link} from 'react-router-dom'

function Nav(props) {
  return (
    <div>
      <div className="Nav" id="nav">
        <nav>
          <ul>
            <li><button><span>App</span></button></li>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/products">Products</Link></li>
            <li><Link to="/about">About Us</Link></li>
            <li><Link to="/login">Login</li> 
          </ul>
        </nav>
      </div>
    </div>
  );
}

这将消除您对容器组件的需求，并允许您以更易于开发的方式来组织页面组件。它还将不需要在useState()组件中添加App来跟踪页面组件。

如何通过父母传递反应成分？

3 个答案: