ReactJS 如何将道具传递给 state 中的组件

Question

function App() {
   const [currentPanel, setCurrentPanel] = useState(ProfilePanel); // ProfilePanel is a component
     return (
          <div className={styles.App}>
                    {currentPanel}     
          </div>
     );
}

In code i set the component "ProfilePanel" to a "curentPanlel" state, then in App i change the component in state, and this render an another panel. the problem is that i dont know how to pass props when i render it like this. i tried the {currentPanel()} but is return an error. please help to find a method to solve this, or if this method to render a component in state are absolutly wrong tell how to do this another way.

Answer 1

the problem is that i dont know how to pass props when i render it like this

You'd do it by using an initial capital letter for the state member ( CurrentPanel instead of currentPanel ), and then using it as normal ( <CurrentPanel someProp="some value" /> ). (It has to be initially-capped because that's how JSX knows it's supposed to be a component, not a tag name.) But , you'll struggle to set a different component function in state, because component functions are, well, functions, and when you pass a function to a state setter, it thinks you're using the callback version of the state setter and calls your function, rather than setting it in state.

If you absolutely have to hold a component function in state, wrap it in an object, but it's much more likely that there's a better solution to the overall problem you're trying to solve.