终极版架构混淆约初始店状态

Question

所有：

我非常新反应和终极版。目前，我想建立几个菜单项，在它看起来像一个标题菜单：

每个项目可以点击，并强调了（只是用相同的颜色来突出），点击动作切换该项目的亮点。

我尽量遵循终极版的模式，从而节省了每个项目的状态，在一家商店（这是混淆了我的第一个地方，我不知道我是否应该在组件保存此高亮状态，用户指定初始高亮状态更容易，或者在全球商店中更容易，因此我可以在任何地方同步）。但我不知道如何设计数据结构这，特别是当它允许用户在指定JSX项目初始状态（如<MenuItem highlight={true} />）

此Any例如可以理解的。

Answer 1

您不应该使用redux存储来处理像项目突出显示状态这样的小事情。这样想吧。您的商店在那里存储来自服务器的数据。应该在组件的状态下处理像组件一样在组件上发生变化的小东西，如颜色或类名。

class MyComponent extends React.Component { 
    constructor(){ 
     super(); 
     this.state = {highlighted: 1}; 
     this.handleHighlightClick = this.handleHighlightClick.bind(this); 
    } 
    handleHighlightClick(e, val){ 
     //set state here for your highlight 
     e.preventDefault(); 
     this.setState({highlighted: val}) 
    } 
    render(){ 
     // for the sake of this example i'll just show a list of items to render 
     let menuItems = [{color: 'red'},{color: 'orange'},{color: 'yellow'},{color: 'white'}]; 
     return (
      {menuItems.map((data, key) => 
       <MenuItem 
        data={data} // data is the color object from the list 
        highlighted={key===this.state.highlighted} // the key of which one is highlighted gets stored in local state 
        onClick={(e) => { this.handleHighlightClick(e, key)} } /> // inline function to pass through the key of the exact menu item so that you can save its key to state 
      )} 
     ); 
    } 
} 

现在这只是一个简单的例子，并不包括你正在尝试做的一切。但其约90％的你想要做的，所以我会让你完成最后的10％:)