React - children props 与 render props

children props：https://zh-hans.reactjs.org/docs/glossary.html#propschildren
render props：https://zh-hans.reactjs.org/docs/render-props.html

一. children props

1. 每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。
2. 组件嵌套使用，使用 children props 通过组件标签体传入结构

1. 函数组件形式

/**
 * 组件嵌套使用，使用 children props 通过组件标签体传入结构
 * Parent组件：通过闭合标签的形式进行 传值到子组件
 * A组件：通过 props.children 接收值
 */
import React from "react";

export default function Parent() {
  return (
    <div>
      <h2>Parent组件</h2>
      <A1>
        {/* 传递的内容，可以是状态、参数 */}
        这里是内容
      </A1>
      <A2>
        {/* 传递的内容，可以是组件 */}
        <B />
      </A2>
    </div>
  );
}

function A1(props) {
  return (
    <div>
      <h2>A1组件</h2>
      {/* 通过 props.children 接收 Parent组件传递过来的内容 */}
      {props.children}
    </div>
  );
}

function A2(props) {
  return (
    <div>
      <h2>A2组件</h2>
      {/* 通过 props.children 接收 Parent组件传递过来的内容 */}
      {props.children}
    </div>
  );
}

function B() {
  return (
    <div>
      <h2>B组件</h2>
    </div>
  );
}

2. 类组件形式

/**
 * 组件嵌套使用，使用 children props 通过组件标签体传入结构
 * Parent组件：通过闭合标签的形式进行 传值到子组件
 * A组件：通过 props.children 接收值
 */
import React, { Component } from "react";

export default class Parent extends Component {
  render() {
    return (
      <div>
        <h2>Parent组件</h2>
        <A1>
          {/* 传递的内容，可以是状态、参数 */}
          这里是内容
        </A1>
        <A2>
          {/* 传递的内容，可以是组件 */}
          <B />
        </A2>
      </div>
    );
  }
}

class A1 extends Component {
  render() {
    return (
      <div>
        <h2>A1组件</h2>
        {/* 通过 this.props.children 接收 Parent组件传递过来的内容 */}
        {this.props.children}
      </div>
    );
  }
}

class A2 extends Component {
  render() {
    return (
      <div>
        <h2>A2组件</h2>
        {/* 通过 this.props.children 接收 Parent组件传递过来的内容 */}
        {this.props.children}
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div>
        <h2>B组件</h2>
      </div>
    );
  }
}

二. render props

1. render prop 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。
2. render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
3. 组件嵌套使用，使用 render props 通过组件标签属性传入结构,而且可以携带数据，一般用 render 函数属性。

1. 函数组件形式

/**
 * 组件嵌套使用，使用render props 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性
 */
import React from "react";
import { useState } from "react";
export default function Parent() {
  return (
    <div>
      <h2>Parent组件</h2>
      {/* 使用A组件，A组件中使用B组件，同时A组件传递数据到B组件 */}
      <A render={(data) => <B data={data}></B>}></A>
    </div>
  );
}

function A(props) {
  const [students, setStudents] = useState({
    id: 1,
    name: "小明",
    age: 18,
  });
  return (
    <div>
      <h2>A组件</h2>
      {/* 展示B组件，同时传值（students） */}
      {props.render(students)}
    </div>
  );
}

function B(props) {
  // 通过props.data(对应Parent组件中的属性名) 接收A组件传递的数据
  const person = props.data;
  return (
    <div>
      <h2>B组件</h2>
      <div>
        A组件传递的数据为：{person.id}——{person.name}——{person.age}
      </div>
    </div>
  );
}

2. 类组件形式

/**
 * 组件嵌套使用，使用render props 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性
 */
import React, { Component } from "react";

export default class Parent extends Component {
  render() {
    return (
      <div>
        <h2>Parent组件</h2>
        {/* 使用A组件，A组件中使用B组件，同时A组件传递数据到B组件 */}
        <A render={(data) => <B data={data}></B>}></A>
      </div>
    );
  }
}

class A extends Component {
  state = {
    students: {
      id: 1,
      name: "小明",
      age: 18,
    },
  };
  render() {
    console.log(this.props);
    const { students } = this.state;
    return (
      <div>
        <h2>A组件</h2>
        {/* 展示B组件，同时传值（students） */}
        {this.props.render(students)}
      </div>
    );
  }
}

class B extends Component {
  render() {
    // 通过this.props.data(对应Parent组件中的属性名) 接收A组件传递的数据
    const data = this.props.data;
    return (
      <div>
        <h2>B组件</h2>
        <div>
          A组件传递的数据为：{data.id}——{data.name}——{data.age}
        </div>
      </div>
    );
  }
}