aush February 2016

Is it a bug to discard passed rest-props to a React component?

I'm developing my wrapper over flexbox in react: https://github.com/aush/react-stack. I have a top level component that creates a container div and sets flex properties to it and also I map over it's children and set flex properties to them (I don't create additional wrapper divs for children, just set flex properties directly to them). And it's works flawlessly except one case.

My component, stripped down:

export default ({ someprops, style, children, ...rest }) => 
  <div style={{ ...style, ...flexContainerStyle }} {...rest}>
  {
    React.Children.map(children, (child, i) =>
      React.cloneElement(child, 
        { key: i, style: { ...child.props.style, ...flexItemStyle } }))
  }
  </div>;

Consider this simple example, when all children are just standard divs:

codepen example 1

  ReactDOM.render(
    <Horizontal>
      <div className="box1">1</div>
      <div className="box2">2</div>
      <Vertical>
        <div className="box3">3</div>
        <Horizontal grow={1}>
          <div className="box4" align={'end'}>4</div>
          <div className="box5" align={'end'}>5</div>
          <div className="box6" align={'end'}>6</div>
        </Horizontal>
      </Vertical>
    </Horizontal>,
    document.getElementById('app')
  );

Now, let's say I have these two react components: BuggedComponent and NotBuggedComponent and put them as children:

codepen example 2

  const BuggedComponent = ({ children }) => 
    <div className="box5">{children}</div>;
  const NotBuggedComponent = ({ children, ...rest }) => 
        

Answers


HazardouS February 2016

It comes down to how much control over own child components does the dev intends to hand out to the consumers. In this case the BuggedComponent is generating a child div and it makes sense for it to pass on the rest properties to it. However, if the child would have been a more complex control where allowing arbitrary attributes does not make sense, there won't be a need for passing them down. Yours is a very specific case where you need absolute control over what class the child control has, but this may not be true in a general scenario. A good example is the very popular material-ui library, if you look at any complex control, it minutely controls the allowed props and almost never passes them down. It could make keeping inner-markup change-proof very difficult, apart from the simplest of cases.

Post Status

Asked in February 2016
Viewed 3,600 times
Voted 13
Answered 1 times

Search




Leave an answer