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

Question

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

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

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

Answer 1

你也可以用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>

Answer 2

我不知道你有什么问题与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>