Question

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

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

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

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>

Answer 2

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

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

2 个答案: