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

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

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

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

最佳答案

您也可以使用Object.keys来完成。它将通过对象键进行迭代

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

  render() {
    const { myObj } = this.state;
    return (
      <div>
      {
        Object.keys(myObj).map((key,index) =>
        <div key={index}>
          <label>{key}</label>
          <input placeholder={this.state.myObj[key]} />
        </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>