动态插入的 React 组件

Dynamically inserted React Components

本文关键字：组件 React 插入 动态      更新时间：2023-09-26

我正在React/flux中构建一个所见即所得的工具，您可以通过将元素拖放到页面上来构建接口。例如，我有一个可放置元素的列表：列表、表单、输入框、文本框等。当用户在页面上放置其中一个元素时，我需要插入关联的 react 组件（并且我存储他们删除的对象的 name 属性，这样我就会知道我需要的组件名称）。因此，如果用户将列表拖放到页面上，并且我的关联组件标签<list />，我不能只做<{component.name} />，它会将其变成<list />......然而，我需要一种方法来做到这一点。有什么想法吗？

所以摆

弄这个，我最终让它像这样工作：

var Sort = require('./sort')
var List = require(./list')
var allComponents = {
    sort: Sort,
    list: List
}
React.createElement(allComponents[component.componentName], {data:component.data})

所以现在如果我的组件.componentName 是列表，它将呈现组件，数据将成为我的属性

相关文章：