React组件Person重复渲染问题：如何解决无/带props时的重复输出？

先理清楚你的情况：你主动在App组件里渲染了两次Person组件——一次只传入了children文本内容，一次传入了technology和syntax props。但从输出截图能看到，第一次渲染的组件里显示了undefined，这应该是你不想看到的效果。你可能误以为是“重复渲染”问题，但核心是第一次渲染时缺少指定props导致的异常内容展示。

你的现有代码 #

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

你的输出效果 #

解决办法 #

1. 给props设置默认值，避免undefined显示 #

你可以在Person组件里给technology和syntax设置默认值，这样即使没传props，也会显示友好的提示文本，而不是生硬的undefined：

import React from 'react'
// 用解构赋值加默认参数的写法更简洁直观
const person = ({ children, technology = '暂未指定', syntax = '暂未指定' }) => {
  return (
    <div>
      <p>{children}</p>
      <p>The technology used is {technology} & the syntax is {syntax}</p>
    </div>
  )
};
export default person

2. 条件渲染，只有传了props才显示技术细节 #

如果希望第一次渲染时只展示children内容，不显示第二行技术描述，可以加个条件判断，只有当两个props都存在有效值时才渲染对应内容：

import React from 'react'
const person = (props) => {
  return (
    <div>
      <p>{props.children}</p>
      {/* 检查两个props是否都有值，满足条件才渲染这一行 */}
      {props.technology && props.syntax && (
        <p>The technology used is {props.technology} & the syntax is {props.syntax}</p>
      )}
    </div>
  )
};
export default person

3. 只渲染一次组件（如果这是你的真实需求） #

如果你根本不想渲染两次Person组件，只是想根据场景展示不同内容，那可以在App里只渲染一次组件，通过条件控制是否传入props：

// App.js
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person'
class App extends Component {
  render() {
    // 可以根据业务逻辑动态调整这个条件
    const shouldShowTechInfo = true;
    return (
      <div className="App">
        <h1>Hello I am Arjun</h1>
        <Person 
          technology={shouldShowTechInfo ? "React" : undefined}
          syntax={shouldShowTechInfo ? "JSX" : undefined}
        >But What's The Language?</Person>
      </div>
    );
  }
}
export default App;

这样就只会渲染一次组件，根据shouldShowTechInfo的值来决定是否展示技术细节。

内容的提问来源于stack exchange，提问作者Endemic