Question

好吧，我不知道是否允许我发布这样的问题，这显然更通用。但是我只是想澄清和了解更多关于React可重用组件的信息。我有一个组件，用于保存信息以打开模式并插入用户输入。

在设计方面，我想创建相同的组件-但我不想显示输入和模态，而是想显示信息。

我是否可以将同一视觉组件用于不同目的，例如输入数据和可视化数据？由于输入和模态组件使用逻辑及其内部状态来打开模态，并使用从其父级到handleInputData的方法，我该怎么办？如何切换这些功能？

Answer 1

是的，当然。这是React的核心功能，即组件的声明性组成。

例如，假设您有一个Modal组件，用于处理屏幕上其他内容上方的内容。您可以使用道具自定义其渲染的内容吗？

他们将以不同的方式（例如表单或显示信息）来专门化该组件。

示例（从概念上来说）：

const Modal = ({ title, children }) => (
  <div className="modal">
    <h1>{ title }</h1>
    <div className="body">
      { children }
    </div>
  </div>
)

const FormModal = () => (
  <Modal title="What's your name?">
    <form>
       { /* your form here */ }
    </form>
  </Modal>
)

const AlertModal = () => (
  <Modal title="Something happened">
    { /* your information to display here */ }
  </Modal>
)

在这种情况下，我将如何创建React可重用组件？

1 个答案: