React, брат, общение и рендеринг

В приложении response / redux у меня есть компонент-контейнер, который отображает два дочерних компонента: заголовок и часть содержимого. Моя проблема в том, что заголовок должен отображать заголовок контейнера. Но этот заголовок на самом деле определяется контентной частью. Метод рендеринга контейнера выглядит так:

render() {
    return (
        <div className='Container'>
            <ContainerHeader />
            <div className='ContainerContent'>
                {this.renderContent()}
            </div>
        </div>
    );
}

Метод renderContent отображает различные компоненты в зависимости от состояния контейнера, и каждый компонент определяет логику того, как должен выглядеть заголовок контейнера. Например: контент, отображающий определенный элемент, должен помещать имя элемента в заголовок контейнера.

Так что, возможно, у меня здесь неправильное представление, которое вызывает эту проблему. Моя основная идея заключалась в том, что контейнер структурирован на заголовок и контент, поэтому я делаю эти два разных компонента. Но определение заголовка зависит от содержимого, а отображение заголовка выполняется в заголовке.

Как этого достичь? Может быть, использовать React refs? Или мне нужно изменить концепцию иерархии здесь?


reactjs render siblings
person Michbeckable    schedule 03.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вероятно, есть способы добиться этого с помощью refs. Тем не менее, я бы действительно рекомендовал использовать более чистый подход и выяснить заголовок, прежде чем выполнять рендеринг с помощью this.renderContent.

Примерно так:

render() {
    const title = this.getTitle();
    return (
        <div className='Container'>
            <ContainerHeader title={title} />
            <div className='ContainerContent'>
                {this.renderContent(title)}
            </div>
        </div>
    );
}

Возможно ли в вашем случае извлечь логику, которая решает, какой заголовок должен быть отображен на уровень выше, в функцию, подобную getTitle, как показано здесь?

person amann    schedule 03.08.2016
comment
В настоящее время моя реализация делает это так, как вы предлагаете. У меня есть логика заголовка в контейнере и я устанавливаю ее через реквизиты в компоненте заголовка. Но для инкапсуляции было бы неплохо вставить заголовок из соответствующего компонента содержимого в заголовок. Без реакции я бы установил функцию getTitle () для каждого интерфейса компонента контента. И передал бы это только компоненту заголовка. Но это не способ реагирования. Жизненный цикл компонента затрудняет взаимодействие между дочерними компонентами. - person Michbeckable; 03.08.2016
comment
Если для вас действительно важно, чтобы логика getTitle находилась в компоненте контента, вы можете поместить эту логику в статический метод контента. Таким образом, вы можете вызвать его из класса владельца до создания экземпляра. - person amann; 04.08.2016
comment
Это хороший момент, но я не могу использовать статический метод, потому что заголовок зависит от свойств экземпляра, и я не могу получить доступ к this.props в статическом методе, не так ли? - person Michbeckable; 04.08.2016
comment
Вы не можете, но можете передать их в качестве параметра. Что-то вроде static getTitle(param1, param2) {…}, а затем вы можете вызвать это с помощью Component.getTitle(this.props.param1, this.props.param2). Это помогает в вашем случае? - person amann; 05.08.2016