react/redux应用程序中的动态标题子组件

Question

我正在构建一个响应应用程序，其中标题根据路由而变化，但也取决于其他组件的状态。

我正在寻找一种方法来控制从子组件的头。

例如，我希望当我点击主页面上的按钮时，页眉会添加新组件。

有没有办法实现这一点，同时避免头多个if语句？

Answer 1

在您的状态中有一个变量，其中包含要附加到标题的内容。当状态发生变化时，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）