在React中使用复合代替子组件方法的最佳方法?

Question

class DropZoneComp extends React.Component <any, any>
{
onDrop (file) {
}
render() {
return ( <DropZone onDrop={this.onDrop.bind(this)}></DropZone>)
}
}
export default function DropZoneParent(props) {
const onDrop = () => {
}
return (
<DropZoneComp onDrop={onDrop}/>
)
}

我意识到的问题是，类组件函数不是道具，所以你不能真正传递它们，但也许有一种方法可以做到这一点，而不会破坏任何东西。一个问题是，它不是一个道具，所以我不能真正取代它，另一个问题是，如果onDrop改变类变量不是道具，所以如果我想传递onDrop从父组件，我需要存储相同的非道具或实例或状态变量在父类。什么是最好的实践和最干净的方式去做，特别是如果onDrop必须调用setState和改变实例变量(例如:this。文件,这一点。currentFile等等)?

Answer 1

你可以将函数作为prop传递，但是你必须在构造函数中做绑定，然后你可以调用setState并在每个实例上更改变量。

constructor(props) {
super(props);
this.onDrop = this.onDrop.bind(this);  
}
onDrop (file) {
}
render() {
return ( <DropZone onDrop={this.onDrop}></DropZone>)
}