Нубский вопрос -> как я могу получить стену html-тегов в Reactjs, не возвращая «[Object object]»?

avatar
Johnny Santos
8 августа 2021 в 22:39
49
4
0

Я пытаюсь отобразить «x» тегов h2 в браузере, но он возвращает на экран «x» номеров «[Object object]».

Если я объявлю с помощью "", он не будет отображаться как тег, а будет представлять собой простой текст. Я понимаю, что могу попробовать это с массивом, но я просто хотел бы знать, почему это не работает и есть ли способ добиться этого самым простым способом

import React from 'react';

function App(){
  var n1 = <h2>testing</h2>
  var n2;
  for(let i = 0;i<10;i++){
    n2 = n2 + n1;
    console.log(n2)
  }
  return <>{n2}</>
}

export default App;
Источник

Ответы (4)

avatar
Farhad Rad
8 августа 2021 в 22:56
0

Вы не можете просто добавить компонент к другому, используя оператор +. На самом деле каждая переменная или объект может содержать только один компонент jsx в качестве своего значения. Самый простой способ, как вы упомянули, - это использование массивов: 

import React from 'react';

function App(){
  var n1 = <h2>testing</h2>
  var n2 = [];
  for(let i = 0;i<10;i++){
    n2.push(n1);
    console.log(n2)
  }
  return <>{n2}</>
}

export default App;

более простой способ сделать это может быть полезен:

import React from 'react';
const App = () => <>{ Array(10).fill().map((_, i) => <h2>testing</h2>) }</>;
export default App;
Johnny Santos
8 августа 2021 в 23:00
0

Спасибо за разъяснение. Я только что попробовал массив, как упомянул Дэниел, и он работает, если я придерживаюсь его. Но еще раз спасибо

avatar
Dennis
8 августа 2021 в 22:52
1
n2 = n2 + n1;

Проблема в том, что вы не можете складывать объекты вместе, поэтому JS попытается сложить их, как если бы они были числами. Поскольку это не так, объекты будут преобразованы в строки и объединены. Значение toString по умолчанию для объектов — [object Object], так что это то, что вы видите на экране.

avatar
Daniel Duong
8 августа 2021 в 22:50
0

Я думаю, что react позволит вам отобразить только массив узлов Не добавленные узлы с «+» Попробуйте это:

var n2 = []

n2.push(n1)

Кроме того, область действия n1 уже определена, и я не уверен, что на нее можно ссылаться несколько раз при рендеринге. Попробуйте переместить его в область блока цикла

. 
  var n2 = [];
  for(let i = 0;i<10;i++){
      var n1 = <h2>testing</h2>
avatar
Dan Oswalt
8 августа 2021 в 22:46
0

Без кавычек, это не текст, это JSX, который React компилирует в эту функцию: React.createElement(component, props, ...children), которая возвращает новый объект элемента React, так что это не сработает в консольном журнале.

https://reactjs.org/docs/jsx-in-depth.html

Поскольку это объект, вы можете вывести список свойств этого объекта, попробовав console.dir() вместо console.log(). Но элемент React сам по себе не является элементом HTML, пока он не будет отображен с помощью React.render(), поэтому он не будет отображаться как HTML-тег в консоли, на данный момент это просто объект javascript.

Johnny Santos
8 августа 2021 в 22:55
0

спасибо, я посмотрю на это