React 组件在屏幕上打印两次

Question

我名为 'Person' 的 React 组件在屏幕上打印了两次，一次没有道具，一次有道具。

//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 组件中应该只有一个 <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;

Answer 2

您正在渲染您的组件两次，为了获得所需的输出，您可以这样做：

//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;

这样，您的组件将呈现其子项 "But What's The Language?"，并接收第二行的 technology 和 syntax 属性。

Answer 3

其他答案告诉你应该怎么做，并告诉了主要原因。我将尝试对其进行更多解释。由于组件的结构，您正在渲染您的组件两次，并且您有三行。

第一次渲染：

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

这里您使用 child 渲染组件。您的 child 是 "But What's The Language?" 字符串。除了 child 之外，您不会传递任何其他道具。您的组件形状是：

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

第一行来自 children 道具。第二行是你的段落和其他道具。因此，在第一个渲染中你没有这些道具，因此 technology 和 syntax.

渲染为空

你的第二次渲染：

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

这里你没有child。这意味着没有 <Person>Child</Person> 形状，只有 <Person /> 对于此渲染，您还有其他道具。第三行来自这个带有 technology 和 syntax 属性的渲染。因此你没有任何 children 道具，第一行是空的。

React 组件在屏幕上打印两次

React component printed twice on the screen

javascript

reactjs

react-props