react/redux 应用程序中的动态 header child 组件

Question

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

我正在寻找一种方法来控制来自 child 个组件的 header。

例如，我希望当我单击主页中的按钮时，header 会附加新组件。

有没有办法在避免 header 中出现多个 if 语句的同时实现这一点？

Answer 1

在您的状态中有一个变量，其中包含要附加到 header 的内容。当状态发生变化时，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可以从任何child调用，相应的变化将反映在header中（如果状态属性发生变化appendToHeader)

react/redux 应用程序中的动态 header child 组件

Dynamic header child component in react/redux application

javascript

reactjs

react-router

redux

react-redux