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

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

本文关键字:一个 错误 rest-props React 组件      更新时间:2023-09-26

我正在 react: https://github.com/aush/react-stack 中通过 flexbox 开发我的包装器。我有一个顶级组件,它创建一个容器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时:

代码笔示例 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')
  );

现在,假设我有两个反应组件:BuggedComponentNotBuggedComponent 并将它们作为子组件:

代码笔示例 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 属性。对我来说,这是一个明显的错误,甚至不仅仅是一个不好的做法。但是我已经查看了一些github存储库,我发现这是一种非常普遍的做法,我找不到任何文章/指南来说明此问题并将其指出为不良做法。

我不传递休息

的唯一论据是不清楚休息道具应该在哪里通过。但是由于反应组件只能有一个根,因此将休息道具传递给它是很自然的。

所以,问题是:这是真的,不幸的非常普遍,不好的做法,还是有一些解释为什么丢弃休息属性是开发反应组件的正确方法?

这归结为开发人员打算向消费者分发对自己的子组件的多少控制权。在这种情况下,BuggedComponent正在生成一个子div,它将其余属性传递给它是有意义的。但是,如果子控件是一个更复杂的控件,其中允许任意属性没有意义,则无需传递它们。这是一个非常特殊的情况,您需要绝对控制子控件具有的类,但在一般情况下可能并非如此。一个很好的例子是非常流行的 material-ui 库,如果你看任何复杂的控件,它会详细控制允许的道具,几乎从不传递它们。除了最简单的情况外,它可能会使保持内部标记防更改变得非常困难。