React Render Callback Pattern(渲染回调模式)-CSDN博客

本文详细介绍了React中的渲染回调模式，通过将this.props.children作为函数使用，并传递state作为参数，实现根据不同条件渲染不同组件的效果。具体示例展示了如何根据user状态渲染Loading或Profile组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Render Callback Pattern，渲染回调模式，其实是将this.props.children当做函数来调用。

例如：

要根据user参数确定渲染Loading还是Profile组件

const App = () => {
  return (
    <div>
      <FieldItem username='magalhini'>
        {user => user === null
        ? <Loading />
        : <Profile info={user} />}
      </FieldItem>
    </div>
  );
};

Render Callback Pattern的做法是：

class FieldItem extends React.Component {
  state = { user: null }

  componentDidMount() {
    // We can make an ajax call here, for e.g.
    setTimeout(() => this.setState({
      user: `I have now fulfilled something for ${this.props.username}`
    }), 1500);
  }

  render() {
    // Render the children with a function using state as the argument
    return this.props.children(this.state.user);
  }
}

关键是这句 this.props.children(this.state.user)，将this.props.chilren当做函数，将user作为参数传入。

完整代码如下：

// Loading component
const Loading = () => <p>Loading...</p>;

// Profile component
const Profile = (props) => <p>{props.info}</p>;

const App = () => {
  return (
    <div>
    <h3>An application</h3>
    <FieldItem username='magalhini'>
      {user => user === null
      ? <Loading /> 
      : <Profile info={user} />}
    </FieldItem>
    </div>
  );
};
  
class FieldItem extends React.Component {
  state = { user: null }
  
  componentDidMount() {
    // We can make an ajax call here, for e.g.
    setTimeout(() => this.setState({
      user: `I have now fulfilled something for ${this.props.username}`
    }), 1500);
  }
   render() {
    // Render the children with a function using state as the argument
    return this.props.children(this.state.user);
  }
}
                   
ReactDOM.render(<App/>, document.getElementById('app'));