react/redux应用程序中的动态标题子组件
我正在构建一个响应应用程序,其中标题根据路由而变化,但也取决于其他组件的状态。react/redux应用程序中的动态标题子组件
我正在寻找一种方法来控制从子组件的头。
例如,我希望当我点击主页面上的按钮时,页眉会添加新组件。
有没有办法实现这一点,同时避免头多个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
可以从任何儿童被调用,而相应的变化将在报头中被反映(如果在一个变化状态属性appendToHeader
)
谢谢你的回答,我实际上正在寻找将_component_追加到标题上容器的子组件。你如何看待我能够实现这一目标? – Slakk
检查上次编辑。我添加了2个根据状态显示的子组件。我不知道你是否可以避免多个条件。我希望这是你正在寻找的。 –
我迟到了,但你应该看看这个问题:https:// *。 com/questions/33062830/using-react-router-with-a-layout-page-or-multiple-components-per-page – Finickyflame