反應：將 state 傳遞給 {this.props.children}

Question

我正在構建一個能夠顯示一些事件的 web 應用程序。 這些事件將根據頁面以不同的方式顯示。

例如，我有一個名為 EventsNews 的組件，我想在其中使用 Carousel package 顯示事件。 我有其他名為 EventsPage 的組件，我想在其中以列表的形式顯示事件。 我想重用代碼，所以我在考慮做下一個。

    class **EventsNews** extends Component {
        
            render() {
                return (
                    <React.Fragment>
                        <SectionTitleBar>News & Events</SectionTitleBar>
                        <h1 className={classes.Title}>Latest Events</h1>
        
                        **<Events>
                            <EventsCards />
                        </Events>**
                        
                        <SeeMoreButton href="/">See All Events {'>'}</SeeMoreButton>
                    </React.Fragment>
                );
            }
    }
export default EventsNews;

然后，我的事件組件將處理與 state 和 HTTP 處理相關的所有內容（從 API 中使用。然后該組件應將 state 傳遞給 {this.props}。

class **Events** extends Component {

    **state** = {
        events: [
            {id: "1", title: "...", local: "...", date: "...", description: "...", url: "Link1"},
            {id: "2", title: "...", local: "...", date: "...", description: "...", url: "Link2"},
            {id: "3", title: "...", local: "...", date: "...", description: "...", url: "Link3"},
        ]
    }

    // TODO: HTTP Handling...

    render() {

        return (
            <React.Fragment>
                **{this.props.children(this.state.events)}**
            </React.Fragment>
        );
    }
}

export default Events;

然后我的 EventsCards 將成為呈現事件的不同方式之一，並且應該從道具中接收它們。

const **eventsCards** = (props) => (
   
    <Carousel>
        {this.props.events.map( item => (
            <CustomCard title={item.title} subtitle={item.date} body={item.description}/>
        ))}
    </Carousel>
);

export default eventsCards;

我的問題是，當在 EventsNews 組件中的 Events 中包裝 EventsCards 時，我無法將 state 從 Events 傳遞給 EventsCards。

我不能直接在 Events 組件中聲明 EventsCards（而不是 {this.props.children}），因為我還需要一個名為 NewsList 的組件，它將作為 Events 的子項在其他頁面中傳遞。 所以基本上我希望能夠做到這一點。

<Events>
     <EventsCards /> //display the events in cards.
</Events>

或者

<Events>
 <EventsList /> //display the events in a list.
</Events>

在某種程度上，事件 state 將始終傳遞給它的子道具。

我已經閱讀了很多關於將孩子稱為 function 的內容，但我無法將這些內容應用於我的情況。

謝謝你。

Answer 1

children道具不是 function，所以你不能調用它。 相反，您必須使用以下實用程序：

return React.cloneElement(React.Children.only(children), { events }));

現在讓我們通過它 go 。 Children.only檢查給定值是否僅包含一個 React 元素。 接下來我們克隆返回的元素並更新它的道具以包含events 。 如果你想修改多個孩子，那么你應該使用Children.map 。

要了解有關此類實用程序功能的更多信息，請參閱： https://reactjs.org/docs/react-api.html#reactchildren