javascript - 当作为参数传递时,构造函数中绑定的 React 方法如何失去它的有界性?
问题描述
这是此问题的代码框:https ://codesandbox.io/s/rdg-grouping-81b1s
我React-Data-Grid
用来渲染表格。我用两列渲染 a ReactDataGrid
,当您单击GROUP
标题单元格中的文本时,您按该列分组。
为了能够拥有带有该文本的自定义标题单元格GROUP
,我使用headerRenderer
定义列的对象中的属性。
传递给此属性的值是一个以onClick
处理程序作为参数的函数,并返回使用该onClick
处理程序的功能性 React 组件。
onClick
参数只是原始 React 组件上的一个方法,它绑定在组件的构造函数中。
如您所见,我使用此headerRenderer
属性两次,每列一次。但是,对于第一列,我再次将参数函数绑定到 React 组件。对于第二列,我没有,当我尝试单击GROUP
此列的文本时会产生错误。请参阅下面的错误图像。
我的问题是:既然我已经在构造函数中绑定了函数,为什么还要绑定?
import React from 'react';
import './App.css';
import ReactDataGrid from 'react-data-grid';
import { Data } from 'react-data-grid-addons';
const HeaderRowRenderer = function(props) {
return (
<div
style={{
backgroundColor: 'red',
paddingLeft: 10,
height: '100%',
padding: 0,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<span>{props.column.name}</span>
<span onClick={props.onClick}>GROUP</span>
</div>
);
};
const HeaderRenderer = function(groupBy, onClick) {
return function(props) {
return (
<HeaderRowRenderer
{...props}
onClick={function() {
onClick(groupBy);
}}
/>
);
};
};
const rows = [{ productname: 'Beef', quantity: 5 }, { productname: 'Veggies', quantity: 10 }];
class App extends React.Component {
columns = [
{
key: 'productname',
name: 'Product',
width: 200,
headerRenderer: HeaderRenderer('productname', this.groupBy.bind(this)),
},
{
key: 'quantity',
name: 'Quantity',
headerRenderer: HeaderRenderer('quantity', this.groupBy),
},
];
constructor(props) {
super(props);
this.state = {
groupBy: new Set([]),
};
this.groupBy = this.groupBy.bind(this);
}
groupBy(group) {
const newSet = new Set(this.state.groupBy);
if (newSet.has(group)) {
newSet.delete(group);
} else {
newSet.add(group);
}
this.setState({ groupBy: newSet });
}
render() {
const groupBy = Array.from(this.state.groupBy);
// const rows = this.props.orderItems;
const groupedRows = Data.Selectors.getRows({
rows: rows,
groupBy,
});
return (
<div>
<ReactDataGrid
columns={this.columns}
rowGetter={i => groupedRows[i]}
rowsCount={groupedRows.length}
minHeight={650}
/>
</div>
);
}
}
export default App;
我查看了 的代码React-Data-Grid
,我相信该headerRenderer
道具的调用如下:
getCell() {
const { height, column, rowType } = this.props;
const renderer = this.props.renderer || SimpleCellRenderer;
if (isElement(renderer)) {
// if it is a string, it's an HTML element, and column is not a valid property, so only pass height
if (typeof renderer.type === 'string') {
return React.cloneElement(renderer, { height });
}
return React.cloneElement(renderer, { column, height });
}
return React.createElement(renderer, { column, rowType });
}
我不太熟悉绑定使用bind
然后被传递的函数会失去这种有界性的方式。这是否是 React.cloneElement 的结果,或者可能是什么原因?
解决方案
推荐阅读
- rxjs - Angular rxjs 有条件地调用 HTTP 端点
- javascript - 类别轴标签重叠且未在甘特图中显示
- list - Flutter Search 可迭代的 Where
- javascript - Emmet、Visual Code、JSX 和 CSS 不能一起工作
- python - 定义新的 Python 时区
- python - 就地添加新值和列
- javascript - 我怎样才能加分来纠正答案?
- python - Python beautifulsoup 循环遍历 span
- google-cloud-platform - 您可以在 Google Cloud 中为 VM 实例批量设置“启用删除保护”吗?
- php - 用户“root”@“localhost”的 Laravel 宅基地访问被拒绝