Как отложить оценку JSX, переданного в качестве дочерних элементов другому компоненту?

Question

Реагировать 16.13. Я пишу компонент Loader для обработки различных состояний сбоя и передачи «успешного» содержимого в качестве дочернего элемента, например:

<Loader
    isLoading={loading}
    isError={error}>

    <div>{this.props.loadedContentFromRedux}</div>
</Loader>

Компонент Loader довольно прост:

class Loader extends Component {

render() {
    return this.props.isLoading ? <Spinner /> :
    this.props.isError ? <Error /> :
    this.props.children
}

}

Насколько я понимаю, поскольку я передаю реквизиты loadedContentFromRedux дочернему элементу напрямую, он оценивается перед передачей в качестве дочернего элемента Loader и поэтому оценивает его до вызова метода рендеринга Loader.

Есть ли способ отложить оценку, чтобы предотвратить это, или мне нужно принять меры? Или, может быть, клонируйте ребенка и передайте ему реквизит?

Answer 1

Попробуйте следующее:

const loadedContent = () => <div>{this.props.loadedContentFromRedux}</div>

<Loader
 isLoading={loading}
 isError={error}
 loadedContent={loadedContent}       
/>

Измените компонент Loader на:

class Loader extends Component {

render() {
    return this.props.isLoading ? <Spinner /> :
    this.props.isError ? <Error /> :
    this.props.loadedContent()
   }
}

Делая это, вы не выполняете loadedContent во время передачи, поэтому выполнение this.props.loadedContentFromRedux не будет случиться. Он будет выполняться в компоненте Loader в методе рендеринга.

Отредактированный ответ

Я смог развить это и немного изменить синтаксис, чтобы он был проще для глаз, и передать функцию как дочерний элемент. Это требует проверки типа в рендере Loader как таковом:

<Loader
 isLoading={loading}
 isError={error}>

{() => <div>{this.props.loadedContentFromRedux}</div>}

</Loader>

Затем защититесь от типа функции следующим образом - это потому, что JSX иногда преждевременно оценивается:

class Loader extends Component {

render() {
    return this.props.isLoading ? <Spinner /> :
    this.props.isError ? <Error /> :
    typeof this.props.children==='function' ? this.props.children() :
    this.props.children
   }
}