Question

我事先道歉我是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

Answer 1

这里有两件事。

您需要始终返回一个元素，在本例中为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>
  );    
}

```

此致

Answer 2

React组件无法返回多个React元素。您应该将它们包装在export const MessageSentiment = (props) => { var sentiment = JSON.parse(props.sentiment) return ( <div> { Object.keys(sentiment).map(key => ( <h1 key={key}>{key}: {sentiment[key]*100}</h1> )) } </div> ) }或任何其他容器元素中。

-dontwarn com.aerserv.sdk.adapter.**

请记住：keys应该赋予数组中的元素，以使元素具有稳定的标识。

Answer 3

您需要收集数组中的所有HTML并将其返回。你可以做2路

使用map - map返回新数组而不修改现有数组

export const MessageSentiment = (props) => {
              var sentiment = JSON.parse(props.sentiment)
              return (
                     <div>
                      {
                         Object.keys(sentiment).map((key, index) => <h1 key={index}> {key}:{sentiment[key]*100}</h1>)
                      }
                    </div>
                      )
              }

使用数组推送方法

 export const MessageSentiment = (props) => {
     var sentiment = JSON.parse(props.sentiment)
     let itemList = [];
     for(var key in sentiment ) {
       itemList.push(<h1>{key}: {sentiment[key]*100}</h1>)
     }
     return (
             <div>{itemList}</div>
           )
     }

为对象中的每个键返回html

3 个答案: