Question

我对Javascript和函数式编程的全部想法都很陌生。这样的问题。所以我有一个下拉菜单作为React Component，

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的Key，但是单击捕获值。这是我的hashMap，

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

};

非常感谢Black Friday对此有所帮助。

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>

通过字典映射以在Javascript

1 个答案: