如何将道具传递给 React Big Calendar 自定义组件？答案

【问题标题】：How to pass props to React Big Calendar custom components?如何将道具传递给 React Big Calendar 自定义组件？
【发布时间】：2019-08-19 23:52:13
【问题描述】：

我正在使用带有自定义事件组件的 React Big Calendar。

在我的自定义组件中，我需要显示一些用户可以点击的按钮（通过弹出框）。我的弹出窗口工作正常，但我还希望渲染 BigCalendar 的类在单击弹出窗口中的按钮时得到通知。我们如何将“onButtonClick”事件作为道具传递给我的自定义组件？这是我的代码的简化版本

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEvent
                }}
            />
        );
    }
}

这是我的 CustomEvent 类

class CustomEvent extends Component {
    render() {
        return (
            <div>
                <p>My event title: {this.props.title}</p>
                <MyPopover>
                    <Button onClick={this.props.onPopoverButtonClick}>
                </MyPopover>
            </div>
        )
    }
}

我在想办法通过

onPopoverButtonClick={this.popoverButtonClickHandler}

到我的 CustomEvent 以便在单击按钮时通知父级。

有什么想法可以实现吗？谢谢

【问题讨论】：

你试过这样传递组件吗？ components={{event: <CustomEvent onPopoverButtonClick={this.popoverButtonClickHandler} /> }}
@AlexandrZavalii 我认为这行不通……它会引发运行时错误。我通过以下解决方案得到了这个工作。但是还是感谢您调查它:-)

标签： reactjs react-big-calendar

【解决方案1】：

好的，在查看了 GitHub 上的 here 之后，我成功地完成了这项工作

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEventContainer({
                        onPopoverButtonClick: this.popoverButtonClickHandler
                    })
                }}
            />
        );
    }
}

这里是 CustomEventContainer 和 CustomEvent

const CustomEventContainer = ({ onPopoverButtonClick }) => props => {
    return <CustomEvent event={props} onPopoverButtonClick={onPopoverButtonClick} />;
}

const CustomEvent = React.memo((props) => {

    //...
    return (
        <div>
            <Button content='View' onClick={(e) => props.onPopoverButtonClick(e)} />
        </div>
    );
})

【讨论】：