javascript - 映射字典以在 Javascript 中显示下拉值

Question

我对 Javascript 和函数式编程的整个概念都很陌生。因此这个问题。所以我有一个下拉菜单作为 React 组件，

class Dropdown extends React.Component{

  render(){
    return(
        <SplitButton title="Dropdown">
          <MenuItem href="#books">Books</MenuItem>
          <MenuItem href="#podcasts">Podcasts</MenuItem>
          <MenuItem href="#">Tech I Like</MenuItem>
          <MenuItem href="#">About me</MenuItem>
          <MenuItem href="#addBlog">Add a Blog</MenuItem>
        </SplitButton>
    );
}

我想用 hashMap 中的值替换硬编码值并得到类似的结果。

render(){
<SplitButton title={chosenKey}>
   {dict.map(this.displayOptions)}
</SplitButton>
}

这是displayOptions函数，

displayOptions(){
    return(
      <MenuItem href="#" onClick={this.onDropDownClick}>{}</MenuItem>
    );
  }

我无法做到这一点，这就是我正在尝试做的事情。显示 hashMap 的键，但单击时捕获值。这是我的 hashMap，

const dict = {
  "A" : "123",
  "B" : "234",
  "C": "345",
  "D": "456",
  "E": "567",
  "F": "678",
  "G" : "789"

};

非常感谢一些黑色星期五对此的帮助。

Answer 1

这是一个非常简单的示例，它使用 Object.keys 来映射 dict 对象:

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      dict: {
        "A" : "123",
        "B" : "234",
        "C": "345",
        "D": "456",
        "E": "567",
        "F": "678",
        "G" : "789"
      }
    };
  }
  
  onClick(value) {
    console.log(value);  
  }

  render() {
    const dict = this.state.dict;
    return (
      <ul>
        {Object.keys(dict).map(key => (
         <li>
           <a
             href={`#${dict[key]}`}
             onClick={this.onClick.bind(this, dict[key])}
             key={key}>
             {key}
           </a>
         </li>))}
      </ul>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>