Is it possible to pass data to components without a parent?-CodePudding

I understand that the normal way is to pass props through a parent, but I want to know how else I can pass props to a component.

let C1 = createReactClass({

    ...
    render: function() {

        console.log('render C1');
        return (
            <div>
                <button onClick={this.cambiaAAzul}>Azul</button>
                <button onClick={this.cambiaAVerde}>Verde</button>
                <button onClick={this.cambiaARojo}>Rojo</button>
                <p>Estado C2 <strong style={ {color: this.state.color} }>{this.state.color}</strong></p>
                <C2 color={this.state.color}/> // It is common
            </div>
        );
    }
});

CodePudding user response：

Typically, to solve the props-drilling problem, which is what seems to be the issue you are trying to solve, the useContext hook should help.

So set up a context,

const C1ContextProvider = ({children}) => {

//...

// the Provider gives access to the context to its children
return (
  < C1Context.Provider value={someValue}>
    {children}
  </C1Context.Provider >
);

}

... and then in your component where you need someValue, you can just do this:

import React, { useContext } from "react";
import { C1Context } from "../C1Context";

//...
const values = useContext(AirDCPPSocketContext);
cons foo = values.someValue; // <-- someValue obtained from the context

//..

CodePudding user response：

I don't know how it is possible to not have parents but you can pass informations by local storage and context hooks.

CodePudding user response：

Props are by definition arguments passed into a React component. Since React components are instantiated in the context of their parent, I'm not sure if it would be possible to pass props in any other way.

There are many other ways to get data in React though. You could query data from an API or other source, or you could pull from a state manager (such as redux). It just depends on what you are trying to accomplish.

CodePudding user response：

The component's local state only can drill into child components. for passing props without using React component's local state. you have to use state management libraries like Context API or Redux

These libraries are created to make you able to pass props into nonrelated or sibling components

Example with redux: Here I Assume that you set up redux in your project. imagine you have two components that you want to pass props without parent-child relation.


const changeMyWeightAction = (weight) => {
   return {
      type: 'CHANGE_MY_WEIGHT',
      payload: weight
   }
}

const JenniferFunctionComponent = () => {
   const dispatch = useDispatch()
   return (
      <div>
         <span>hello I'm Jennifer and I can decide my weight</span>
         <input onChange={e => dispatch(changeMyWeightAction(e.target.value)})/>
      </div>
   )
}

const WeightFunctionComponent = () => {
   const weight = useSelector(state => state.Jenny.weight)
   return (
      <span>Jenny's weight is {weight}</span>
   )
}

CodePudding user response：

Props are simply things passed into a component when it's called.

For instance:

C1.js

function C1((prop1, prop2) {
  <h1>{prop1} {prop2}</h1>
})

App.js

<C1 prop1="Hello" prop2="World" />
<C1 prop1="React's" prop2="Great" />

By referencing the C1 component in App.js, you can call it with different props to produce different results.

Now I'm not too familiar with the createReactClass and render: you're using, as this is a style of React I've never learned. However, I'd guess that props provide the same function.

Your question asks about props without a parent. Well. Props without a parent wouldn't be props, they'd just be normal JS data types inside your file.

Hope this helps :)