javascript - 阻止点击事件

Question

我有一个包含一组按钮的容器，但让我们将该组件视为单个组件。该组件有一个 onBlockClick，它接收前往何处的 id。

我想将 id 转换为 registrationSomeContainer。

我的问题是，如何从 onBlockClick 处理其他容器？

let registrationContainer = ({
    i18n,
    id,
    name,
    representative,
    onBlockClick,
    dispatch
}) => {

    return (
        <div>
            <div
                className="app_wrapper"
            >
                <Block
                    leftIcon="close"
                    lines={[
                        "Some",
                        representative
                    ]}
                    onBlockClick(id)
                />
            </div>
        </div>
    )

}

Answer 1

性能较差的方法是

const registrationContainer = ({
    i18n,
    id,
    name,
    representative,
    onBlockClick,
    dispatch
}) => {
    return (
        <div className="app_wrapper">
            <Block
                leftIcon="close"
                lines={[
                    "Some",
                    representative
                ]}
                onBlockClick={onBlockClick.bind(null, id)}
            />
        </div>
    );
}

更优化的代码可能是

const registrationContainer = ({
    i18n,
    id,
    name,
    representative,
    onBlockClick,
    dispatch
}) => {
    return (
        <div className="app_wrapper">
            <Block
                id={id} // Look: passing id
                leftIcon="close"
                lines={[
                    "Some",
                    representative
                ]}
                onBlockClick={onBlockClick} // Look: not binding
            />
        </div>
    );
}

class Block extends Component {
    handleClick = (e) => {
        this.props.onBlockClick(this.props.id);
    };

    render() {
        <div onClick={this.handleClick}>

        </div>
    }
}

为什么绑定(bind)方式不好

绑定(bind)onBlockClick={onBlockClick.bind(null, id)}使onBlockClick每次都会获得新的引用，从而导致子组件重新渲染。从这里阅读更多信息 https://daveceddia.com/avoid-bind-when-passing-props/