Question

我有以下用例：

我有一套反应组件
用户将某些图库中的组件添加到页面
用户配置这些组件并收藏视图
用户可以配置这些组件并收藏另一个视图
用户点击他设置中的最喜欢的项目，然后加载具有相应配置的页面。

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

Answer 1

请记住：

React 是用于构建用户界面的JavaScript库。它使用了   声明范式，使你更容易推理你的   应用并旨在既高效又灵活。

只是用户界面

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

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

e.g。

<CustomInput type="text" />并且在其内部可以根据其type返回组件/ html＆gt;。

<List items={this.props.items} />和item可以是object＆gt; {name: 'item name', type: 'item type'}，您可以将其映射到＆gt; <CustomInput type={item.type} name={item.name}/>

所以这一切都取决于您如何处理数据以及如何在前端展示它的计划。

对于您当前的场景

您可以拥有一个Gallery组件，其组件集合可以设置props

中组件的Page

// 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>

使用React创建动态UI

1 个答案:

对于您当前的场景