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

Question

我是个新手，我正在使用material-ui，我想在React中设计一个自定义自动完成功能，从下拉列表中选择数据后，它会在文本输入中显示为筹码。 我正在使用material-ui自动完成功能的onNewRequest属性，但不确定如何在其中呈现芯片组件。 有人可以指导我如何正确执行吗？ 我想设计类似gmail中的布局的收件人。 我知道有可用的npm软件包，但是我需要纯粹从material-ui设计它，所以请以正确的方法进行指导

谢谢

Answer 1

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

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

第一个孩子将始终是自动完成的，修改material-ui样式以使其透明且没有下划线/边框。 无论何时选择元素，都将事件发送给父元素，以将元素添加到处于父元素状态的芯片阵列中。

第二个孩子是芯片阵列。 这只是一个表示性的组件，接收一堆筹码，并且筹码可能包含另一个移除筹码的道具事件。