在另一个内部渲染一个 React 组件

Question

我是 react 新手，我正在使用 material-ui，我想在 React 中设计一个自定义自动完成功能，一旦从下拉列表中选择数据，它就会在文本输入中显示为芯片。我正在使用 material-ui 自动完成的onNewRequest 属性，但我不确定如何在其中渲染芯片组件。 有人可以指导我如何正确地做到这一点吗？我想设计像 gmail 中的布局这样的收件人。我知道有可用的 npm 包，但我需要纯粹从 material-ui 设计它，所以请用正确的方法指导

谢谢

Answer 1

这个问题非常广泛，但我至少会尝试为您指出正确的方向。

您不需要在自动完成中渲染芯片，创建一个新的可重用组件。父组件将包含自动完成和芯片。这将包含所有状态。它有两个子组件：

第一个孩子总是自动完成，修改 material-ui 样式使其透明且没有下划线/边框。 Whenever an element is selected, send an event to the parent to add the element to the chips array in the parent state.

第二个孩子是芯片数组。这只是一个展示组件，接收芯片数组，芯片可能包含另一个移除芯片的道具事件。