丢弃传递给 React 组件的 rest-props 是一个错误吗?
Is it a bug to discard passed rest-props to a React component?
我正在 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')
);
现在,假设我有两个反应组件:BuggedComponent
和 NotBuggedComponent
并将它们作为子组件:
代码笔示例 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 库,如果你看任何复杂的控件,它会详细控制允许的道具,几乎从不传递它们。除了最简单的情况外,它可能会使保持内部标记防更改变得非常困难。
- 我怎么能把一个错误当作未捕获的错误来记录呢
- 在这个使用hasOwnProperty的对象扩展程序中有一个错误,I'我不确定那个bug是什么,也不确定这个扩展
- javascript window.location在检查firebug时给了我一个错误的url路径
- new SharedWorker(“whatever.js”)返回一个错误
- JSON.parse给了我一个错误,但JSONLint说它'是一个有效的json
- 有人能向我解释一下我犯的一个错误吗
- Jasmine:测试setTimeout函数会抛出一个错误
- JavaScript中的一个错误
- 为什么jqPlot显示了一个错误的饼图,其中包含通过AJAX检索的数据
- Webrtc和socket.io:createanswer()总是有一个错误.为什么?我的代码连接了两个对等体,但其中只
- 使用 jQuery 构建一个元素会给我一个错误
- Chai 期望 [函数] 抛出一个(错误)未通过测试(使用 Node)
- 在我的 jquery 函数中得到一个错误
- Addeventlistener 已转换为 IE.也许是另一个错误
- 我有一个错误,由于某种原因,号码被更改了,而不是名字
- 我无法建立离子机器人项目..它给了我一个错误:生成cmd enont
- JQueryAJAX调用:304 respose产生一个错误
- 继续得到一个错误,即某个东西不是函数,但找不到原因
- jQuerylib会导致一个错误,直到刷新为止
- HTML图像加载触发一个错误