zoukankan      html  css  js  c++  java
  • React Render Callback Pattern(渲染回调模式)

    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'));

    出处:http://blog.ricardofilipe.com/post/react-callback-render-pattern

  • 相关阅读:
    盘点开发中那些常用的MySQL优化
    刚入职!就遇到上亿(MySQL)大表的优化
    面试技巧|“唇枪舌剑”之十大招式
    rpc是什么?php中流行的rpc框架有哪些?
    使用 memory_limit 限制 PHP 进程的内存使用
    swoole查看子进程与主进程关系
    使用SecureCRT连接AWS的EC2(Linux系统)亲测可行
    substitute Simple JavaScript Template :
    git 简单图表
    jquery 队列
  • 原文地址:https://www.cnblogs.com/mengff/p/9664418.html
Copyright © 2011-2022 走看看