使用 React 创建动态 UI

Posted 2023-02-23

【中文标题】使用 React 创建动态 UI

【英文标题】：Creating Dynamic UI using React

【发布时间】：2016-04-02 10:50:02

【问题描述】：

我有以下用例：

我有一组反应组件 用户将这些组件从某个图库添加到页面 用户配置这些组件并收藏视图 用户可以配置这些组件并收藏更多视图

用户从他的设置中点击最喜欢的项目，它会加载具有相应配置的页面。

我想知道如何使用 react 来实现这一点。如何使用反应组件动态构建页面？

【参考方案1】：

记住：

React 是一个用于构建用户界面的 javascript 库。它使用一个 声明式范式，使您更容易推理您的 应用程序，旨在既高效又灵活。

只是界面

很多人使用 React 作为 MVC 中的 V。因为 React 没有 关于您的技术堆栈的其余部分的假设，很容易尝试 它是现有项目中的一个小功能。

鉴于此，react 组件只显示您传递的data。您可以根据data 动态构建页面。这通常使用props 传递。

例如

<CustomInput type="text" /> 并且在其中可以返回一个组件/html >基于其type。

<List items=this.props.items /> 和 item 可以是 object >name: 'item name', type: 'item type' 并且您将其映射到 ><CustomInput type=item.type name=item.name/>

因此，这完全取决于您如何处理数据以及如何在前端显示数据的计划。

针对您当前的情况

您可以拥有一个 Gallery 组件，该组件具有您的 Component 集合，该集合设置 Page 内的组件的 props

// components prop of Page is an array of React Components
const arrayOfComponents = [type: 'One', name: 'Component-One', type: 'Two', name: 'Component-Two', type: 'Three', name: 'Component-Three'];
<Container>
    <Gallery>
        <AddReactComponent type="One" />
        <AddReactComponent type="Two" />
        <AddReactComponent type="Three" />
    </Gallery>
    <Page components=arrayOfComponents />
</Container>