/

React 渲染屬性

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”]