[英]What is a robust way of rendering a dynamic quantity of React child components, using the Redux container component pattern?
[英]Dynamic header child component in react/redux application
我正在構建一個反應應用程序,其中標頭根據路由而變化,但也取決於其他組件的狀態。
我正在尋找一種方法來控制子組件的標題。
例如,當我單擊主頁中的按鈕時,我希望標題會附加新組件。
有沒有辦法在避免標題中的多個 if 語句的同時實現這一點?
在您的狀態中有一個變量,其中包含要附加到標題的內容。 當狀態發生變化時,React 負責重新加載所有組件。
例如 - App.jsx
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { appendHeaderDemo } from 'redux/demo.js'
class ChildComponent1 extends Component {
render() {
return <h3>Child component 1 added to header</h3>
}
};
class ChildComponent2 extends Component {
render() {
return <h3>Child component 2 added to header</h3>
}
};
class App extends Component {
render() {
const { dispatch } = this.props
return (
<div className='container'>
<h1> This is my header {this.props.appendToHeader} </h1>
{ this.props.appendToHeader == 'Button clicked' &&
<ChildComponent1 />
}
{ this.props.appendToHeader == 'Some Other State' &&
<ChildComponent2 />
}
<button type="button" onClick={ () => onButtonClick() }> Change Header Content </button>
<div className='container'>
{this.props.children}
</div>
</div>
);
};
}
function mapStateToProps(state) {
const { appendToHeader } = state
return {
appendToHeader
}
}
export default connect(mapStateToProps, { onButtonClick: appendHeaderDemo })(App)
redux/demo.js
-
export const CHANGE_HEADER_CONTENT = 'CHANGE_HEADER_CONTENT'
const initialState = {
appendToHeader: ''
};
// Reducer
export default function appendHeader(state = initialState, action) {
switch (action.type) {
case CHANGE_HEADER_CONTENT:
return Object.assign({}, state, {
appendToHeader: 'Button clicked'
})
default:
return state
}
}
// Actions
export function appendHeaderDemo() {
return {
type: CHANGE_HEADER_CONTENT
}
}
可以從任何子appendHeaderDemo
調用調度函數appendHeaderDemo
並且相應的更改將反映在標頭中(如果狀態屬性appendToHeader
發生更改)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.