反应道具链接

Question

如果我们有像以下的父类：

class IndecisionApp extends React.Component {
    constructor(props) {
        super(props);
        this.handleDeleteOption = this.handleDeleteOption.bind(this);
        this.state = {
            options: props.options
        };
    }


    handleDeleteOption(option) {
        console.log('hdo', option);
    }


    render() {
        const subtitle = 'Put your life into the hands of a computer!!';
        return (
            <div>
                <Header subtitle={subtitle}/>
                <Action
                    handlePick={this.handlePick}
                    hasOptions={this.state.options.length > 0}/>
                <Options
                    options={this.state.options}
                    handleDeleteOptions={this.handleDeleteOptions}
                    handleDeleteOption={this.handleDeleteOption}/>
                <AddOption
                    handleAddOption={this.handleAddOption}/>
            </div>
        );
    }
}

IndecisionApp.defaultProps = {
    options: []
};

我们将方法handleDeleteOption传递给Options组件：

const Options = (props) => {
    return (
        <div>
            {
                props.options.map((option) =>
                    <Option
                        option={option}
                        key={option}
                        handleDeleteOption={props.handleDeleteOption}
                    />)
            }
            <button onClick={props.handleDeleteOptions}>Remove all options</button>
        </div>
    );
}

选项向下传递给每个选项一个handleDeleteOption方法：

const Option = (props) => {
    return (
        <div>
            <p>{props.option}
                <button onClick={props.handleDeleteOption}>Delete</button>
            </p>

        </div>
    );
}

为什么我们在控制台日志中看到父类的handleDeleteOption：

hdo Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}[[Handler]]: Object[[Target]]: Class[[IsRevoked]]: false

代理对象？

这是什么意思？

感谢您的帮助！