为对象中的每个键返回html

debugcn 发表于 Dev

博尔科·科瓦切夫

我提前道歉，我是一个 JS/ReactJS 新手，我在表达这个问题时遇到了麻烦，所以如果这已经在某处得到了回答，我很抱歉。

我有一个这样的对象： Object {Joy: 0.719115, Extraversion: 0.59527, Agreeableness: 0.650457}

我希望能够为对象中的所有键返回 html。截至目前，它只返回第一个键的 html（显然，如果我没记错的话，返回会中断循环）。如何实现对象中所有键的 html 渲染？

import React from 'react'

export const MessageSentiment = (props) => {
  var sentiment = JSON.parse(props.sentiment)
  console.log(sentiment)
    for(var key in sentiment ) {
      console.log(key, sentiment[key])
      return (<h1>{key}: {sentiment[key]*100}</h1>)
    }
}

这些是输出和所需的输出

Output:
<h1>Joy: 71.9115</h1>


Expected output:
<h1>Joy: 71.9115</h1>
<h1>Extraversion: 59.527</h1>
<h1>Agreeableness: 65.0456</h1>

不确定这是否与此有关，但我在控制台中收到警告：

../src/components/messages/MessageSentiment.js
  6:5  warning  The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype  guard-for-in

✖ 1 problem (0 errors, 1 warning)

printWarnings @ webpackHotDevClient.js:196
handleWarnings @ webpackHotDevClient.js:209
connection.onmessage @ webpackHotDevClient.js:255
EventTarget.dispatchEvent @ eventtarget.js:49
(anonymous) @ main.js:274
SockJS._transportMessage @ main.js:272
EventEmitter.emit @ emitter.js:44
WebSocketTransport.ws.onmessage @ websocket.js:35

水晶

这里有两件事。

您需要始终返回一个元素，在本例中为 div。在这个元素里面你可以拥有任何你想要的东西，但它必须是一个单一的父组件。
您将使用map迭代数组并获取新数组。在这种情况下，新数组将包含<h1/>元素。

export const MessageSentiment = (props) => {
  const sentiments = JSON.parse(props.sentiment);
  const keys = Object.keys(sentiments);

  return (
    <div>
     { keys.map(key => (<h1 key={key}>{key}: {sentiments[key]*100}</h1>)) }
    </div>
  );    
}

问候

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。