What is the method for rendering parent-child components in React?

In React, rendering between parent and child components can be achieved through two methods.

1. Prop drilling: The parent component passes data to the child component through props, which is then rendered in the child component. The parent component can dynamically change the properties passed to the child component as needed, achieving the effect of dynamically rendering the child component. For example:

// 父组件
function ParentComponent() {
  const data = 'Hello World';
  return <ChildComponent data={data} />;
}

// 子组件
function ChildComponent(props) {
  return <div>{props.data}</div>;
}

1. Context passing: With React’s context functionality, a parent component can pass data to a child component for rendering. Unlike passing props, context passing can traverse multiple levels of components without the need to pass through props layer by layer. However, context passing may increase coupling between components, so it is important to carefully consider the use cases and component relationships when using context passing. For example:

// 父组件
class ParentComponent extends React.Component {
  static childContextTypes = {
    data: PropTypes.string
  };

  getChildContext() {
    return {
      data: 'Hello World'
    };
  }

  render() {
    return <ChildComponent />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  static contextTypes = {
    data: PropTypes.string
  };

  render() {
    return <div>{this.context.data}</div>;
  }
}

These are two commonly used ways to render parent and child components, developers can choose the appropriate method based on their specific needs.