关于React中组件内部传递函数的语法命名、组件实现及函数式组件适用性的技术问询

Great questions! Let's break these down one by one to clarify how this pattern works in React.

1. 在React中这种函数指定方式的专业名称是什么？ #

这种模式叫做Render Props（渲染属性），核心逻辑是组件接收一个函数作为children（或其他自定义props），随后在组件内部调用这个函数并传递所需数据，将渲染逻辑或回调控制权交还给父组件。

就像你用到的react-axios的<Get>组件，它会在请求过程中（或完成后）把请求参数、响应结果等数据传给这个子函数，让你能灵活处理结果，而不用被组件本身固定的逻辑限制。

2. 如何实现具备此类功能的组件？ #

实现起来很直观，类组件和函数式组件都能轻松做到，下面举两个实用示例：

类组件实现示例 #

import React, { Component } from 'react';

// 模拟类似react-axios的Get组件，用于获取用户数据
class UserFetcher extends Component {
  state = {
    user: null,
    loading: true,
    error: null
  };

  componentDidMount() {
    // 模拟API请求
    fetch(`/api/user?id=${this.props.userId}`)
      .then(res => res.json())
      .then(user => this.setState({ user, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }

  render() {
    // 调用传入的子函数，把组件内部的状态数据传递出去
    return this.props.children({
      ...this.state,
      reload: () => { /* 可添加重新加载的逻辑 */ }
    });
  }
}

// 使用该组件
function App() {
  return (
    <UserFetcher userId="12345">
      {(data) => {
        if (data.loading) return <div>Loading...</div>;
        if (data.error) return <div>请求出错：{data.error.message}</div>;
        return <div>用户名：{data.user.name}</div>;
      }}
    </UserFetcher>
  );
}

函数式组件实现示例（当前主流写法） #

import React, { useState, useEffect } from 'react';

function UserFetcher({ userId, children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/user?id=${userId}`)
      .then(res => res.json())
      .then(user => {
        setUser(user);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [userId]);

  // 调用子函数并传递数据
  return children({ user, loading, error });
}

// 使用方式和类组件完全一致
function App() {
  return (
    <UserFetcher userId="12345">
      {(data) => {
        if (data.loading) return <div>加载中...</div>;
        if (data.error) return <div>出错了！</div>;
        return <h1>你好，{data.user.name}</h1>;
      }}
    </UserFetcher>
  );
}

3. 这种方式是否同样适用于函数式组件？ #

当然适用！而且如今函数式组件配合Hooks是React的主流写法，刚才的示例已经展示了如何在函数式组件中实现Render Props模式。

你甚至可以结合自定义Hook写出更灵活的组件，比如一个通用计数器组件：

function Counter({ children }) {
  const [count, setCount] = useState(0);
  return children({
    count,
    increment: () => setCount(prev => prev + 1),
    decrement: () => setCount(prev => prev - 1)
  });
}

// 使用该计数器组件
function CounterDemo() {
  return (
    <Counter>
      {(counter) => (
        <div>
          <p>当前计数：{counter.count}</p>
          <button onClick={counter.increment}>+</button>
          <button onClick={counter.decrement}>-</button>
        </div>
      )}
    </Counter>
  );
}

这种模式在函数式组件中使用起来非常自然，完全没有兼容性问题。

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