Burada kabul edilen cevapları temel alan bu amaçla yeniden kullanılabilecek bir sarıcı bileşen yazdım. Ancak yapmanız gereken tek şey bir dize geçirmekse, bir data niteliği ekleyin ve e.target.dataset'ten okuyun (bazılarının önerdiği gibi). Varsayılan olarak, paketleyicim bir işlev olan ve 'on' ile başlayan herhangi bir pervaneye bağlanacak ve diğer tüm olay argümanlarından sonra veri pervanesini otomatik olarak arayana geri gönderecektir. Performans için test etmeme rağmen, sınıfı kendiniz oluşturmaktan kaçınma fırsatı verecektir ve şöyle kullanılabilir:
const DataButton = withData('button')
const DataInput = withData('input');
veya Bileşenler ve fonksiyonlar için
const DataInput = withData(SomeComponent);
ya da isterseniz
const DataButton = withData(<button/>)
konteynerin dışında (ithalatınızın yanında)
İşte bir kapta kullanım:
import withData from './withData';
const DataInput = withData('input');
export default class Container extends Component {
state = {
data: [
// ...
]
}
handleItemChange = (e, data) => {
// here the data is available
// ....
}
render () {
return (
<div>
{
this.state.data.map((item, index) => (
<div key={index}>
<DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
</div>
))
}
</div>
);
}
}
İşte 'withData.js sarmalayıcı kodu:
import React, { Component } from 'react';
const defaultOptions = {
events: undefined,
}
export default (Target, options) => {
Target = React.isValidElement(Target) ? Target.type : Target;
options = { ...defaultOptions, ...options }
class WithData extends Component {
constructor(props, context){
super(props, context);
this.handlers = getHandlers(options.events, this);
}
render() {
const { data, children, ...props } = this.props;
return <Target {...props} {...this.handlers} >{children}</Target>;
}
static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
}
return WithData;
}
function getHandlers(events, thisContext) {
if(!events)
events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
else if (typeof events === 'string')
events = [events];
return events.reduce((result, eventType) => {
result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
return result;
}, {});
}