React 渲染屬性
學習如何使用渲染屬性來構建 React 應用程序
一個常見的模式用於在組件間共享狀態是使用 children
屬性。
在組件的 JSX 中,你可以渲染 {this.props.children}
,它會自動將父組件中傳遞的任何 JSX 插入為子元素:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| 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> )
|
然而,這裡存在一個問題:無法從子元素中訪問父組件的狀態。
為了能夠共享狀態,你需要使用一個渲染屬性組件,而不是將組件作為父組件的子元素傳遞。你需要傳遞一個函數,在 {this.props.children()}
中執行該函數。該函數可以接受參數:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| 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>
|
你可以使用任意屬性來代替 children
屬性,所以你可以在同一個組件上多次使用這種模式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| 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'))
|
tags: [“React”, “Render Props”, “Component State”, “JSX”]