为对象中的每个键返回 html

IT技术 javascript reactjs
2021-05-03 01:08:15

我提前道歉，我是一个 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
3个回答

这里有两件事。

  1. 您需要始终返回一个元素，在本例中为 div。在这个元素里面你可以拥有任何你想要的东西，但它必须是一个单一的父组件。

  2. 您将使用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>
  );    
}

``

问候

一个 React 组件不能返回多个 React 元素。您应该将它们包裹在内部<div>或任何其他容器元素中。

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>
  )
}

请记住：应该为数组内的元素提供键，以赋予元素一个稳定的身份。

您需要收集数组中的所有 HTML 并返回它。你可以做 2 种方式

  1. 使用 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>
                      )
              }
  1. 使用数组推送方法

.

 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>
           )
     }
其它你可能感兴趣的问题
上一篇以 redux 形式验证确认密码 下一篇React 不适用于 Android 4.4.2 网页视图浏览器