3分でReact render propsをマスター

午前reviewコードの時、いくつかの問題を発見して、論理の多重化のいくつかの小さい技巧について.それから少し時間をかけて整理して、例を作って、render propsについて話しました.
what is it ?
簡単に言えば、render propsはコンポーネント間で論理を共有するテクニックです.いくつかのレンダリングロジックをpropの形でComponentに渡し、レンダリングロジックに集中します.
What do render props do?
コンポーネントのレンダリングロジックを処理します.
When to use ?
コンポーネントに重複する論理やパターンがあることに気づいたとき.例:

重複UI構造

共有あるデータソース

グローバルイベント(scroll,resize,...)を共有

A live demo
うそばかり言って、一緒に例を見てみましょう.
考えて、时计を书いて、动くあのような(年会の毛はすべて当たらないで、手环をあげてもいいですよ.)
操作の後、テーブルを使いました.
今、私たちはまた時計のバンドを変えたいのですが、どうすればいいですか?書き直しますか?明らかに違います.
ここでrender propsが登場します.
個々の部分を独立させ,異なる部分をpropとして伝えればよい.
上のコード:

class Watch extends Component {
  state = {
    date: moment(),
  }
  
  static propTypes = {
    face: PropTypes.func,
  }
  
  static defaultProps = {
    face: date => ,
  }
  
  componentDidMount = () => (this.TICK = setInterval(this.update, 1000))
  
  componentWillUnmount = () => clearInterval(this.TICK)
  
  update = () => this.setState({ date: moment() })
  
  render = () => (
    
      
        
          {this.props.face(this.state.date)}
        
      
    
  )
}

Strap、Bezel、Screenなどに注目する必要はありません.私たちはキー:Faceだけを見ています.
もし私たちが何も伝えなければ、手に入れたのは空っぽの時計盤です.
この時彼にDefaultFaceをプラスして、HH:mmを表示することができます

  static defaultProps = {
    face: date => ,
  }

いいですね.
今彼に様子を変えて、黄色を騒がせます:

const SecondsFace = ({ date }) => {
  const hours = date.format('HH')
  const minutes = date.format('mm')
  const seconds = date.format('ss')
  return (
    <>
      {hours}
      {minutes}
      {seconds}
    >
  )
}
SecondsFace.propTypes = watchfacePropTypes;

満足する.
私たちのrenderはこうでした

class App extends Component {
  render() {
    return (
        
         } />
      

);
}
}
このように、他のデザインの時計を全部書くことができます.
気持ちがいい
年会はまたまた何も当たらない気持ちは仏を放して慰められました.
完全なコードはここにあります:コード、好きなのは星をあげることができます.
Live Demo : codeOpen
Tips

Dos

コンポーネントが共有または部分的にレンダリング可能な論理が重複する場合

Dont's

むしろ使わなくても

を乱用しないでください.

PureComponentsを使用するときにrender Propsを使用することを避ける.あなたのpropが静的に定義されていない限り.

Notes ⚠️

Render Propはただのテクニックで、名前は何でもいいです.例えばchildrenです.

の大部分はRender PropのシーンでもHOCでも実現できますが、逆も同様です.

That's it.
:)
漏れがあれば、指摘を歓迎します.ありがとうございます.
詳細:
https://reactjs.org/docs/rend...