如何构建通用菜单组件?

Question

我必须构建一个菜单屏幕组件，以后可以很容易地使用。组件只有列表形式的选项。

const options = [
{
text: 'Option 1',
},
{
text: 'Option 2',
},
{
text: 'Option 3',
},
];

，我只是把它映射到组件内部。

const Menu = () => {
return (
<div>
{options.map((option, index) => (
<MenuOption text={option.text} index={index} />
))}
</div>
);
};

const MenuOption = ({ text, index }) => {
return (
<div>
<p>{text}</p>
</div>
);
};

所以任何人都可以通过传入options数据来使用这个菜单组件。我想要的是这个组件也运行对应于单击的选项的功能。因此，我们可以很容易地将需要作为道具运行的函数传递给组件。主要问题是如何将选项与相应的函数关联/映射?

注意:我不能在props中发送带有options数据对象的函数。

Answer 1

我的意思是你可以只发送一个回调到Menu组件:

const Menu = ({ onOptionClick }) => {
return (
<div>
{options.map((option, index) => (
<MenuOption text={option.text} index={index} onClick={onOptionClick} />
))}
</div>
);
};
const MenuOption = ({ text, index, onClick }) => {
return (
<div onClick={() => { onClick(index, text, whatever) }}>
<p>{text}</p>
</div>
);
};