Дочерний элемент React (найден: объект с ключами {}) не будет отображать файл

#javascript #reactjs #react-native

Вопрос:

Продолжайте получать ошибку при попытке экспортировать идентификаторы:

Ошибка: объекты недопустимы как дочерний элемент React (найден: объект с ключами {}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

 >  8 |     )
>  9 |   }
> 10 | 
> 11 | ReactDOM.render(<Ids />, document.getElementById("root"))
> 12 | export default Ids

расширенный:

   156 | }
  157 | 
  158 | _c = Ids;
> 159 | react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render( /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_2__["jsxDEV"])(Ids, {}, void 0, false, {
      |                                                  ^  160 |   fileName: _jsxFileName,
  161 |   lineNumber: 11,
  162 |   columnNumber: 17

Это мой index.js :

 import ReactDOM from 'react-dom';
import Tester from "./Tester.js"

ReactDOM.render(<Tester />, document.getElementById("root"))

Это мой Apps.js :

 import React from 'react';
import ReactDOM from 'react-dom';

function Apps(name) {

    return( <h1>Hello, {name}</h1>

    )
  }
  
ReactDOM.render(<Apps />, document.getElementById("root"))
export default Apps

Это мой Ids.js :

 import React from 'react';
import ReactDOM from 'react-dom';

function Ids(id) {

    return( <h1>id = {id}</h1>

    )
  }

ReactDOM.render(<Ids />, document.getElementById("root"))
export default Ids

Это мой Tester.js :

 import React from 'react';
import ReactDOM from 'react-dom';
import Ids from './Ids.js';
import Apps from './Apps.js';

function Tester(){
    const Apps = "Jenny"
    const Ids = 2

    return(
    <div>
        <Apps />
        <Ids />
    </div>
    )
}

ReactDOM.render(
<Tester
    name ={Apps.name}
    id ={Ids.id}
/>,
document.getElementById("root")
)
export default Tester

Спасибо! Если это не синтаксическая ошибка, пожалуйста, просто пришлите мне подсказки, так как я хочу сам найти ошибку, но мне трудно ее найти, поскольку в ней нет ошибки для Apps.js , но есть ошибки для Ids.js

Ответ №1:

Должен быть только один ReactDOM.render

Компонент React на основе древовидной структуры:

   const Apps = "Jenny"
  const Ids = 2

<Tester
    name ={Apps.name}
    id ={Ids.id}
/>,

Вы не можете передать Apps.name — потому что это строка, а не объект — то же самое с идентификаторами.

Изменить на:

 <Tester
    name ={Apps}
    id ={Ids}
/>,

или:

 const Apps = {
  name: 'Jenny'
}
        
const Ids = {
  id: 2
}

1. Спасибо! Я не знал о ReactDOM и передаваемых строках

2. Хотя у меня больше нет ошибок, он не выводит ни одно из моих значений Tester… Мой тестер настроен следующим образом: функция Tester(){ const Apps = «Jenny» return (<div> <Apps /></div>)}. и рендеринг: <Имя тестера = {Приложения}

3. Просто посмотрите, как передавать и печатать компоненты — вы можете использовать их деструкцию или передавать по реквизитам

Ответ №2:

Вы должны использовать ReactDOM.render только один раз (для корневого элемента).

Затем вам нужно прочитать документацию, чтобы узнать, как передавать свойства компоненту react.

function Apps(name){...} не будет работать, вы должны либо написать :

function Apps(props){ // use props.name to get the name property }
function Apps({name}) { // use the name property }

В принципе, вы должны иметь

index.js

 import ReactDOM from 'react-dom';
import Tester from "./Tester.js"

ReactDOM.render(<Tester />, document.getElementById("root"))

Tester.js

 import React from 'react';
import Ids from './Ids.js';
import Apps from './Apps.js';

function Tester(props){
    return(
      <div>
        <Apps name={props.name}/>
        <Ids id={props.id}/>
      </div>
    )
}

export default Tester

Apps.js

 import React from 'react';

function Apps(props) {
    return <h1>Hello, {props.name}</h1>
}
  
export default Apps

Ids.js

 import React from 'react';

function Ids({id}) {
  return <h1>id = {id}</h1>
}

export default Ids