如何在功能上自动填充React组件的道具？

在React中，可以通过使用默认属性（default props）来实现在功能上自动填充React组件的道具。默认属性是组件定义中的静态属性，它定义了组件在没有传递特定属性时应该使用的默认值。

要在React组件中使用默认属性，可以在组件类中定义一个名为defaultProps的静态属性，并为每个属性设置默认值。当使用组件时，如果没有为特定属性传递值，组件将自动使用默认属性。

下面是一个示例，演示如何在React组件中使用默认属性：

import React from 'react';

class MyComponent extends React.Component {
  static defaultProps = {
    name: 'John',
    age: 25,
    gender: 'male'
  };

  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
        <p>Gender: {this.props.gender}</p>
      </div>
    );
  }
}

export default MyComponent;

在上面的示例中，MyComponent组件定义了name、age和gender三个属性的默认值。如果在使用MyComponent时没有为这些属性传递值，组件将自动使用默认属性。

使用示例：

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent />
    </div>
  );
}

export default App;

在上面的示例中，MyComponent被使用而没有为任何属性传递值。因此，组件将使用默认属性，并在渲染时显示默认值。

默认属性在以下情况下非常有用：