Условный рендеринг в ReactJS

Question

У меня есть ситуация, когда я хочу визуализировать другой заголовок в зависимости от значения переменной в состоянии Redux.

Это мой MyClass.js

class MyClass extends React.Component {
    constructor(props) {
        this.state = {
            headerState: "home"
        };
        this.GetHeader = this.GetHeader.bind(this);
    }

    GetHeader() {
        const headerType = this.renderHeader;
        if (headerType == "a") {
            return (Some html code);
        } [...] {
            return (Some html code);
        } else {
            return (Some html code);
        }
    }

    render() { <
        GetHeader / > // This is line 79
    }

    function mapStateToProps(state, ownProps) {
        return {
            renderHeader: state.renderHeader
        };
    }
}

export default withRouter(connect(mapStateToProps)(MyClass));

Это мой редуктор:

export default function renderHeaderReducer(state = [], action) {
    switch(action.type) {
        case 'RENDER_HEADER':
            return [...state, Object.assign({}, action.headerType)];
        default:
            return state;
    }
}

Когда я попытался запустить код, в браузере написано:

Uncaught ReferenceError: GetHeader не определен в Header.render (Header.js: 79).

Я следовал этому Документ (первый пример)

Не уверен, что я делаю неправильно или какие концепции я неправильно понял в терминах привязки методов к this контексту. Приветствия.

Answer 1

Потому что вам не хватает функции перед GetHeader () {

function GetHeader(){}

Для дополнительной справочной проверки: https://reactjs.org/docs/conditional-rendering.html

Answer 2

Нет переменной GetHeader, это метод this.GetHeader. Нет причин использовать GetHeader в качестве элемента React, это метод, которому не нужны свои реквизиты. При вызове в качестве метода его не нужно привязывать к this.

Там нет this.renderHeader, потому что renderHeader это опора.

Скорее всего, должно быть:

  state = {
    headerState: "home"
  }

  GetHeader() {
    const headerType = this.props.renderHeader;
    if (headerType == "a") {
       return (Some html code);
    } [...] {
      return (Some html code);
    } else {
      return (Some html code);
    }
 }

 render() {
   return <>
     {this.GetHeader()}
     ...
   </>;
 }

Если render не слишком большой или GetHeader не используется повторно, возможно, нет необходимости извлекать его содержимое из render.

Answer 3

Потому что это не так. Вы должны добавить переменную в рендер:

render() {
  const GetHeader = this.GetHeader;
  return <GetHeader />;
}

У вашего кода было 2 проблемы: 1. GetHeader не был доступен локально. 2. Вы не использовали оператор возврата