在另一個組件內部渲染一個React組件

Question

我是個新手，我正在使用material-ui，我想在React中設計一個自定義自動完成功能，從下拉列表中選擇數據后，它會在文本輸入中顯示為籌碼。 我正在使用material-ui自動完成功能的onNewRequest屬性，但不確定如何在其中呈現芯片組件。 有人可以指導我如何正確執行嗎？ 我想設計類似gmail中的布局的收件人。 我知道有可用的npm軟件包，但是我需要純粹從material-ui設計它，所以請以正確的方法進行指導

謝謝

Answer 1

這個問題非常廣泛，但是我將至少嘗試為您指明正確的方向。

您無需在自動完成中渲染芯片，而創建一個新的可重用組件。 父組件將包含自動完成和芯片。 這將包含所有狀態。 它具有兩個子組件：

第一個孩子將始終是自動完成的，修改material-ui樣式以使其透明且沒有下划線/邊框。 無論何時選擇元素，都將事件發送給父元素，以將元素添加到處於父元素狀態的芯片陣列中。

第二個孩子是芯片陣列。 這只是一個表示性的組件，接收一堆籌碼，並且籌碼可能包含另一個移除籌碼的道具事件。