Question

我正在创建一个组件（使用Flow），以及它到目前为止的样子：

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                //Customize your if statement  
                if (recyclerView.computeVerticalScrollOffset() > recyclerView.getHeight() * 2) {
                    if (!fab.isShown()) {
                        fab.show();
                    }
                } else {
                    fab.hide();
                }
            }
        });

然而，我意识到我想接受事件处理程序，无论它们是什么，并且不必将它们全部列出就好了。

我可以传递事件名称和回调的地图作为道具，但我想知道是否有一种React内置方式允许我将任何事件处理程序作为道具传递并被接受。

Answer 1

您可以将道具转移到您的组件：

const HitSlopHelperComponent = ({ children: React.Node, ...rest }) =>
  <div {...rest} >{children}</div>

Answer 2

您可以使用rest destructuring pattern并将其传递给Element。但是请确保所有其他非事件处理程序的道具应单独destructured，否则您将开始看到有关未知道具的警告

const HitSlopHelperComponent = ({
  children: React.Node,
  width: String,
  height: String, 
  ...others
}) => (
   <div {...others}>{/* things you want here */}</div>
)

关于 rest destructuring pattern ：

将数组的其余部分分配给变量

解构数组时，您可以解压缩并分配剩余的数组   使用其余模式将其中的一部分转换为变量：
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
注意如果在左侧使用带有rest元素的尾随逗号，则会抛出SyntaxError：
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

注意：在v16之前进行反应，未知属性未传递给DOM，而React会向其发出警告。然而，从v16开始，它将把所有归因都传递给DOM

根据React v16升级功能docs：

过去，React用于忽略未知的DOM属性。如果你写的   具有React无法识别的属性的JSX，React就是这样   跳过它。例如，这个：//您的代码：
<div mycustomattribute="something" />
将使用React 15向DOM呈现一个空div：
// React 15 output:
<div />
在React 16中，我们正在做出改变。现在，任何未知的属性都会最终进入DOM：
// React 16 output:
<div mycustomattribute="something" />

使用React隐式传递所有事件属性

2 个答案: