React Render Props

Tìm hiểu cách Render Props có thể giúp bạn xây dựng một ứng dụng React

Một mẫu phổ biến được sử dụng để chia sẻ trạng thái giữa các thành phần là sử dụngchildrenchỗ dựa.

Bên trong một JSX thành phần, bạn có thể kết xuất{this.props.children}tự động đưa bất kỳ JSX nào được chuyển vào thành phần mẹ dưới dạng phần tử con:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      /*...*/
    }
  }

render() { return <div>{this.props.children}</div> } }

const Children1 = () => {}

const Children2 = () => {}

const App = () => ( <Parent> <Children1 /> <Children2 /> </Parent> )

Tuy nhiên, có một vấn đề ở đây: trạng thái của thành phần cha không thể được truy cập từ các thành phần con.

Để có thể chia sẻ trạng thái, bạn cần sử dụng một thành phần hỗ trợ kết xuất và thay vì truyền các thành phần làm con của thành phần mẹ, bạn chuyển một hàm mà sau đó bạn thực thi trong{this.props.children()}. Hàm có thể chấp nhận các đối số,:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio' }
  }

render() { return <div>{this.props.children(this.state.name)}</div> } }

const Children1 = props => { return <p>{props.name}</p> }

const App = () => <Parent>{name => <Children1 name={name} />}</Parent>

Thay vì sử dụngchildrenprop, có một ý nghĩa rất cụ thể, bạn có thể sử dụng bất kỳ prop nào và vì vậy bạn có thể sử dụng mẫu này nhiều lần trên cùng một thành phần:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio', age: 35 }
  }

render() { return ( <div> <p>Test</p> {this.props.someprop1(this.state.name)} {this.props.someprop2(this.state.age)} </div> ) } }

const Children1 = props => { return <p>{props.name}</p> }

const Children2 = props => { return <p>{props.age}</p> }

const App = () => ( <Parent someprop1={name => <Children1 name={name} />} someprop2={age => <Children2 age={age} />} /> )

ReactDOM.render(<App />, document.getElementById(‘app’))

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: