在Fabric React中创建动态增长的Stack项目的最佳方式是什么？

在 Fabric React（现称为 Fluent UI）中，创建一个动态增长的 Stack 项目可以通过使用 Stack 组件来实现。Stack 组件是一个灵活的布局容器，可以用于创建水平或垂直排列的子组件。你可以使用 Stack 组件的 grow 属性来实现动态增长。

以下是一个示例，展示如何在 Fluent UI 中创建一个动态增长的 Stack 项目：

安装 Fluent UI

首先，确保你已经安装了 Fluent UI 库。如果你还没有安装，可以使用以下命令进行安装：

npm install @fluentui/react

创建 Stack 组件

以下是一个示例代码，展示如何使用 Stack 组件创建一个动态增长的布局：

import React, { useState } from 'react';
import { Stack, DefaultButton, TextField } from '@fluentui/react';

const DynamicStackExample = () => {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([...items, `Item ${items.length + 1}`]);
  };

  return (
    <Stack tokens={{ childrenGap: 10, padding: 10 }}>
      <DefaultButton text="Add Item" onClick={addItem} />
      <Stack grow>
        {items.map((item, index) => (
          <Stack.Item key={index} grow>
            <TextField label={item} />
          </Stack.Item>
        ))}
      </Stack>
    </Stack>
  );
};

export default DynamicStackExample;

解释代码

导入库：导入 React、useState、Stack、DefaultButton 和 TextField 组件。
定义状态：使用 useState 钩子定义一个 items 状态，用于存储动态添加的项目。
添加项目函数：定义一个 addItem 函数，每次调用时向 items 状态添加一个新项目。
渲染 Stack 组件：
- 使用 Stack 组件创建一个容器，并设置 tokens 属性来定义子组件之间的间距和内边距。
- 使用 DefaultButton 组件创建一个按钮，点击按钮时调用 addItem 函数。
- 使用 Stack 组件的 grow 属性创建一个动态增长的容器。
- 遍历 items 状态，使用 Stack.Item 组件和 TextField 组件渲染每个项目，并设置 grow 属性使其动态增长。

运行示例

将上述代码保存为一个 React 组件文件（例如 DynamicStackExample.js），然后在你的应用程序中导入并使用该组件：

import React from 'react';
import ReactDOM from 'react-dom';
import DynamicStackExample from './DynamicStackExample';

ReactDOM.render(<DynamicStackExample />, document.getElementById('root'));

通过上述步骤，你可以在 Fluent UI 中创建一个动态增长的 Stack 项目。每次点击按钮时，都会向 Stack 中添加一个新的项目，并且这些项目会根据 grow 属性动态增长。