React Render Callback Pattern(渲染回调模式)

发布时间：2020-12-15 20:23:13 所属栏目：百科来源：网络整理

导读：React Render Callback Pattern，渲染回调模式，其实是将this.props.children当做函数来调用。例如：要根据user参数确定渲染Loading还是Profile组件 const App = () = { return ( div FieldItem username=‘magalhini‘ {user = user === null ? Loading /

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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!