Javascript React组件在屏幕上打印两次

我的名为“Person”的React组件在屏幕上打印两次，一次不带道具，一次带道具

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“./人/人”导入人
类应用程序扩展组件{
render（）{
返回(
你好，我是阿琼
但是语言是什么？
);
}
}
导出默认应用程序问题在于您实际上渲染了组件两次。您的
应用程序
组件中应该只有一个
标记：

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

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“./人/人”导入人
类应用程序扩展组件{
render（）{
返回(
你好，我是阿琼
但是语言是什么？
);
}
}
导出默认应用程序；
问题在于您实际上渲染了组件两次。您的
应用程序
组件中应该只有一个
标记：

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

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“./人/人”导入人
类应用程序扩展组件{
render（）{
返回(
你好，我是阿琼
但是语言是什么？
);
}
}
导出默认应用程序；
您将渲染组件两次，要获得所需的输出，可以执行以下操作：

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

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“./人/人”导入人
类应用程序扩展组件{
render（）{
返回(
你好，我是阿琼
但是语言是什么？
);
}
}
导出默认应用程序；

这样，您的组件将呈现其子组件“但是语言是什么？”，并接收第二行的
技术
和
语法
属性。
您将呈现组件两次，为了获得所需的输出，您可以执行以下操作：

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

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“./人/人”导入人
类应用程序扩展组件{
render（）{
返回(
你好，我是阿琼
但是语言是什么？
);
}
}
导出默认应用程序；

这样，您的组件会呈现其子组件“但是语言是什么？”，并接收第二行的
技术
和
语法
属性。
其他答案会告诉您应该如何做，并告诉您主要原因。我会尽量多解释一点。渲染组件两次，由于组件的结构，有三条线

第一次渲染：

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

这里你没有孩子。这意味着没有
Child
shape，而只是
对于这个渲染，你有其他的道具。第三行来自此渲染，带有
技术
和
语法
道具。因此您没有任何儿童道具，第一行是空的。
其他答案会告诉您应该如何做，并告诉您主要原因。我会尽量多解释一点。渲染组件两次，由于组件的结构，有三条线

第一次渲染：

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

这里你没有孩子。这意味着没有
Child
shape，而只是
对于这个渲染，你有其他的道具。第三行来自此渲染，带有
技术
和
语法
道具。因此您没有任何子道具，第一行是空的。
因为您要打印两次<代码>但是语言是什么这很正常，因为要渲染两次Person组件。你到底想做什么？输出中有3行。我只想要2行，即“但是语言是什么？”和“使用的技术是React&语法是JSX”。为什么出现第二行？因为你要打印两次<代码>但是语言是什么这很正常，因为要渲染两次Person组件。你到底想做什么？输出中有3行。我只想要2行，即“但是语言是什么？”和“使用的技术是React&语法是JSX”。为什么会出现第二行？感谢您的解释。我认为组件的打印次数只取决于调用的次数。现在很明显，它也取决于组件的渲染次数。是的，您可以渲染任意次数的组件。实际上，这就是处理大量项目（即来自阵列）的渲染的方式。但您不需要手动执行此操作，您通常会映射数组并呈现项。感谢您的解释。我认为打印组件的次数只取决于调用组件的次数。现在很明显，它也取决于呈现组件的次数。是的，可以根据需要多次渲染组件。实际上，这就是处理大量项目（即来自阵列）的渲染的方式。但你不需要手动操作，你这样做通常是映射数组和渲染项目。感谢你的快速回答。非常感谢。它解决了我的问题。感谢你的快速回答。非常感谢。它解决了我的问题。是的，我现在明白了。实际上，我刚开始学习React，但直到面对这个问题，我才真正理解组件渲染的概念问题。还要感谢@devserkan让这个概念变得清晰。是的，我现在明白了。事实上，我刚开始学习React，但在面对这个问题之前从未真正理解组件渲染的概念。还要感谢@devserkan让这个概念变得清晰。