Question

我正在使用flexbox开发我的包装器：https://github.com/aush/react-stack。我有一个顶级组件，它创建一个容器div并为其设置flex属性，我也映射它的子项并为它们设置flex属性（我没有为子项创建额外的包装div，只是直接将flex属性设置为它们）。除了一个案例之外，它的工作完美无缺。

我的组件，被剥离：

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>;

考虑这个简单的例子，当所有孩子都只是标准的div：

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')
  );

现在，假设我有两个反应组件：BuggedComponent和NotBuggedComponent并将它们作为子项：

codepen example 2

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

  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>
          <BuggedComponent align={'end'}>5</BuggedComponent>
          <NotBuggedComponent align={'end'}>6</NotBuggedComponent>
        </Horizontal>
      </Vertical>
    </Horizontal>,
    document.getElementById('app')
  );

在这种情况下，box 5除了BuggedComponent设置之外没有任何属性。

显然，设置为'bugged'组件的属性显然会丢失，因为这个组件本质上会丢弃rest-properties。对我来说这是一个明显的错误，甚至不是一个坏的做法。但我已经看了一些github回购，我看到这是一个很常见的做法，我找不到任何文章/指南说明这个问题并指出它是一个不好的做法。

我没有通过休息的唯一理由是它不清楚，应该传递 rest-props。但由于反应组分只能有一个根，所以应该将rest-props传递给它。相当自然。

所以，问题是：它真的，不幸的是非常普遍，不好的做法，还是有一些解释为什么放弃休息属性是开发反应组件的正确方法？

Answer 1

归结为开发者打算向消费者分配对自己子组件的控制程度。在这种情况下，BuggedComponent生成一个子div，它将其余属性传递给它是有意义的。但是，如果孩子本来是一个更复杂的控制，允许任意属性没有意义，那么就不需要传递它们。你的是一个非常特殊的情况，你需要绝对控制子控件的类，但在一般情况下可能不是这样。一个很好的例子是非常受欢迎的material-ui库，如果你看一下任何复杂的控件，它会精确地控制允许的道具并且几乎不会将它们传递下来。除了最简单的情况之外，它可以使内标更改变得非常困难。

丢弃传递的rest-props到React组件是一个错误吗？

1 个答案: