Geek Answers Handbook

What is the idiomatic way to use props in a component composed in reactions

Dear architects / designers,

I use Alt Js to implement repositories and actions to respond to my own components. In this case, some stored properties are not used throughout the component tree, but only by some components that are at a very deep level.

For example (see image): I composed the component Xusing the Yand components Z. And he introduced the alt storage under the name Pinto the component Xand passed it to the component Zthrough the component Yas a support. In this case, the storage is Pnot used by the component Y, but it needs to be passed as a support for Y, because it needs to specify the componentZ

I feel that the requirement of the prop component Zdestroys the component ’s usage Ybecause the prop is not really used Yin it, just going to Z. What is the idiomatic way of inserting alt stores and transferring props to child components without spoiling the code. Is there a way to transfer details, insert alt storages in one specific place and use in each component without going through the entire component tree.

Layout Layout Component

+4
source share
2 answers

You can refuse unexpected details by forcing each component to reset all its details.

function ComponentX(props) {
  const { p } = props;
  // use p here
  return <ComponentY {...props} />;
}

function ComponentY(props) {
  // don't use props.p here
  return <ComponentZ {...props} />;
}

function ComponentZ(props) {
  const { p } = this.props;
  return <span>{p}</span>
}

render(
  <ComponentX p={true} />,
  document.getElementById('app')
);

, , react-redux .

, ( -). , react-redux, .

export default class Provider extends Component {
  getChildContext() {
    return { store: this.store }
  }
  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

  render() {
    return Children.only(this.props.children)
  }
}

, ( ) .

function ComponentX(props, context) {
  const { foo } = context.store;
  return <div>{foo}</div>;
}

render(
  <Provider store={yourStore}>
    <ComponentX />
  </Provider>,
  document.getElementById('app')
);
+5

, , . , , .

<Z/> "" <Y/>, "" <X/>, .

<Z/> , , "" , ", " - ".

Alt JS, react-redux , , , , , , .

- :

* (, Alt JS): *

<AltJS store={store}>  //let say AltJs is a component that expose the store via context
    <X>
        <Y>
            <Z p={p received from store}/>
        </Y>
    </X>    
</AltJS/>
+2

More articles:


All Articles