Реактивный компонент напечатан дважды на экране

Question

Компонент My React с именем «Person» печатается дважды на экране, один раз без реквизита и один раз с реквизитом.

//App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {
  render() {
    return (
      <div className="App">
       <h1>Hello I am Arjun</h1>
          <Person>But What's The Language?</Person>
          <Person technology="React" syntax="JSX"/>
      </div>
    );
  }
}

export default App;

//Person.js

import React from 'react'

const person = (props) => {
    return (
        <div>
            <p>{props.children}</p>
            <p>The technology used is {props.technology} & the syntax 
            is {props.syntax}</p>
        </div>
    )
};

export default person

И это вывод:

Как я могу решить эту проблему?

Answer 1

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

//App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello I am Arjun</h1>
        <Person technology="React" syntax="JSX">
          But What's The Language?
        </Person>
      </div>
    );
  }
}

export default App;

таким образом, ваш компонент отобразит своих потомков «Но что это за язык?» И получитtechnology и syntax свойства для второй строки.

Answer 2

Другие ответы покажут вам, как вы должны это сделать, и объяснили основную причину.Я постараюсь объяснить это немного больше.Вы визуализируете свой компонент дважды, и у вас есть три строки из-за структуры вашего компонента.

Первый рендер:

<Person>But What's The Language?</Person>

Здесь вы рендерите компонент с дочерним элементом.Ваш ребенок здесь "Но что это за язык?"строка.Вы не пропустите ни одной другой опоры, кроме ребенка.Ваша форма компонента:

<p>{props.children}</p>
<p>The technology used is {props.technology} & the syntax is {props.syntax}</p>

Первая строка идет от детской опоры.Вторая строка - ваш абзац с другими реквизитами.Итак, в первом рендере у вас нет этих реквизитов, следовательно, рендеринг как пустой для technology и syntax.

Ваш второй рендер:

<Person technology="React" syntax="JSX"/>

Здесь вы не делаетеУ меня нет детей.Это означает не <Person>Child</Person> форму, а просто <Person /> Для этого рендера у вас есть другие реквизиты.Третья строка идет от этого рендера с technology и syntax реквизитом.Следовательно, у вас нет детской опоры, первая строка пуста.

Answer 3

Проблема в том, что вы фактически визуализируете свой компонент дважды.В вашем компоненте App должен быть только один тег <Person />:

//App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'

class App extends Component {
  render() {
    return (
      <div className="App">
       <h1>Hello I am Arjun</h1>
          <Person technology="React" syntax="JSX">But What's The Language?</Person>
      </div>
    );
  }
}

export default App;