Say I have a main ponent which uses 2 sub ponents and i want to pass a styling object prop to those sub ponents. Is there a way of passing those props without passing them directly to the main ponent since those props are not directly assosiated with the main ponent but rather the sub ponents.

<MainComponent subComponentStyling={} />

I reckon I'd be able to do this where I pass the sub ponents down as children:

<MainComponent>
 <SubComponent1 style={} />
 <SubComponent1  style={} />
</MainComponent>

On the other hand those two sub ponents are tightly connected to main ponent since I will always pass multiple props from the main ponent to the sub ponents, so I can't really do the above since the functionality that I want to pass down exists in the main ponent.

Do I have to create a render prop and pass stuff down through that or is it more convient to pass the styling props down to main ponent and from main ponent to the sub ponent?

I'm newbie at react so I probably missed something basic.

Say I have a main ponent which uses 2 sub ponents and i want to pass a styling object prop to those sub ponents. Is there a way of passing those props without passing them directly to the main ponent since those props are not directly assosiated with the main ponent but rather the sub ponents.

<MainComponent subComponentStyling={} />

I reckon I'd be able to do this where I pass the sub ponents down as children:

<MainComponent>
 <SubComponent1 style={} />
 <SubComponent1  style={} />
</MainComponent>

On the other hand those two sub ponents are tightly connected to main ponent since I will always pass multiple props from the main ponent to the sub ponents, so I can't really do the above since the functionality that I want to pass down exists in the main ponent.

Do I have to create a render prop and pass stuff down through that or is it more convient to pass the styling props down to main ponent and from main ponent to the sub ponent?

I'm newbie at react so I probably missed something basic.

• javascript
• reactjs

Share Improve this question Follow asked Jun 22, 2018 at 20:06 JohnJohn 31755 silver badges1919 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

There are 3 ways of passing down props to subComponents:

Via normal props: Pass the props to the MainComponent which will pass it down to the SubComponent.

Caveat: In this case you will be interfering with the namespace of MainComponent and making MainComponent aware of the props accepted by its children which defeats abstraction.

Via render props: MainComponent will accept a render prop and will not be aware of what it is rendering.

Caveat: The SubComponent will be rendered by the parent which has the styles and passed down via render prop to be rendered inside the MainComponent. Here MainComponent is unaware of the props accepted by SubComponent and can pass it props that it wants. But the parent which has the styles is aware of the SubComponent. Plus in the future if any other ponent uses MainComponent in the future, it will have to keep passing SubComponent as render prop. So this defeats the DRY principle( Do not repeat yourself) .

Via context: Here you don’t need to pass anything to MainComponent. The ponent which has the styles will be the Provider and the SubComponent will be the consumer. Context API is part of React 16.

Caveat: Here the ponent which has the styles is only aware of the styles it needs to pass and SubComponent is only aware of the styles it needs to consume. MainComponent is blissfully unaware of this contract.

I remend passing styles via Context to fulfill the purpose of keeping your code DRY and avoiding making MainComponent aware of the props passed down from top to SubCompoment.

You can use Context provided by React to pass style to SubComponent without passing through MainComponent

Here's example for the same -

// Context lets us pass a value deep into the ponent tree
// without explicitly threading it through every ponent.
// Create a context for the current style (with "{display:none}" as the default).
const SubComponentStyleContext = React.createContext({display:none});

class App extends React.Component {
  render() {
    // Use a Provider to pass the current style to the tree below.
    // Any ponent can read it, no matter how deep it is.
    // In this example, we're passing "{display:block}" as the current value.
    return (
      <SubComponentStyleContext.Provider value={{display:block}}>
        <MainComponent />
      </SubComponentStyleContext.Provider>
    );
  }
}

// A ponent in the middle doesn't have to
// pass the style down explicitly anymore.
function MainComponent(props) {
  return (
    <div>
      <SubComponent />
    </div>
  );
}

function SubComponent(props) {
  // Use a Consumer to read the current style context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current style is "{display:block}".
  return (
    <SubComponentStyleContext.Consumer>
      {style => /*use style here as you want*/}
    </SubComponentStyleContext.Consumer>
  );
}

I might be pletely misunderstanding what you're asking(sorry if so). But if you want to pass styles down you can do it in an array like so.

<View style={[subComponentStyling, {backgroundColor: blue}]}>
  ...
</View>