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