Reactの知識ポイントのまとめ（3）

Reactの知識ポイントの要約

小道具をレンダリングする

Render Propsの目的は、コンポーネントの状態を再利用することです。propsを介してコンポーネントAに関数を渡します。propsはコンポーネントBを返し、コンポーネントBをコンポーネントAでレンダリングできるようにします（コンポーネントAの状態を使用）。

1.レンダリングプロップの使用

class Cat extends React.Component {
    
    
  render() {
    
    
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={
    
    {
    
     position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = {
    
     x: 0, y: 0 };
  }

  handleMouseMove(event) {
    
    
    this.setState({
    
    
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    
    
    return (
      <div style={
    
    {
    
     height: '100vh' }} onMouseMove={
    
    this.handleMouseMove}>

        {
    
    /*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {
    
    this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
    
    
  render() {
    
    
    return (
      <div>
        <h1>移动鼠标!</h1>
        <Mouse render={
    
    mouse => (
          <Cat mouse={
    
    mouse} />
        )}/>
      </div>
    );
  }
}

第二に、JSXの本質

JSXReact.createElement()シンタックスシュガーです。BabelはJSXをReact.createElement()関数呼び出しに変換し、JSXJSコードにコンパイルします。