列出嵌套反应组件的道具

Question

I want to enumerate children props of a nested component without passing them over. Let's take a look at this example (pseudo code)

# JSX
<Root>
  <NodeWrapper />
</Root>

# NodeWrapper component
function NodeWrapper() {
  return <InnerNode myPropName="myPropValue" />
}

# Root component
function Root({children}) {
  // children.props > lists all NodeWrapper props
  // how to get a hold of InnerNode props, so that Root can detect prop `myPropName`?
}

The only way I found so far is to pass myPropName to NodeWrapper . Is there a way to grab myPropName value from within Root component without passing it down from Root to InnerNode through NodeWrapper ?

I understand InnerNode will be available only when NodeWrapper is rendered, that is not the case as Root is being rendered and InnerNode is not rendered yet (ie, it is a component and not yet an instance).

I think this question hides some React concept I am missing.

EDIT: Please note that my question is not to avoid prop drilling. Prop drilling and contexts are techniques to pass data down the component tree. What I want to do is quite the opposite: read a nested component props from the Root. The usage of Root.children gives me only NodeWrapper props, but I do actually would like to get InnerNode props from within Root component.

Answer 1

I think you are trying to avoid props drilling that is passing props to children where it is not directly needed but it is needed inside some nested component. For this I would recommend to use Context it is great way to avoid prop drilling here how you can configure it

    import './App.css';
import { useContext } from 'react';

// In the login Component

const InnerComponent = () => {
  const authContext = useContext(MyContext);

  const handleLogin = () => {
    authContext.onAuthChange(true); // this will make the user login that change the value of auth to true
  }

  return (
    <div>Login JSX</div>
  )
}

const MyContext = React.createContext(null);

const NodeWrapper = () => <InnerComponent />


function App() {
  const [auth, setAuth] = React.useState(true);

  const handleAuthChange = (newAuthState) => {
    setAuth(newAuthState);
  }

  return (
    <MyContext.Provider value={{
      auth,
      onAuthChange: handleAuthChange
    }}>
     <NodeWrapper />
    </MyContext.Provider>
    
    
  );
}

export default App;