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

npm install @fluentui/react

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;

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

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