块点击事件

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>
    }
}

为什么绑定方式不对

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

块点击事件

On Block Click Event

javascript

reactjs

onclick

react-router-redux