javascript - 将对象键和值映射到具有不同属性的组件

Question

myObj = {name: 'Alice', age: '19', weight: 52}

我希望将对象内的所有键和值分别呈现到一个标签和输入。

我已经尝试过使用Object.entries，但是键和值无法分开。有什么建议吗？谢谢

标签： javascriptreactjs

Answer 1

我不知道你有什么样的问题，Object.entries但它可以在你的情况下使用：

class App extends React.Component {
  state = {
      myObj: {
        name: 'Alice', age: '19', weight: 52
        },
  }

  render() {
    const { myObj } = this.state;
    return (
      <div>
      {
        Object.entries( myObj ).map( ( [ key, value ] ) =>
        <div key={key}>
          <label>{key}</label>
          <input placeholder={value} />
        </div>
        )
      }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>