Компонент внутри функции рендеринга называется дочерним компонентом - PullRequest
Новая
       21

Компонент внутри функции рендеринга называется дочерним компонентом

0 голосов
/ 23 октября 2019

Я немного запутался в детском компоненте. Как я знаю, дочерний компонент - это компонент, вложенный в другой компонент, например 

<Parent>
   <Child />
</Parent>

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

class Parent extends React.Component {
  render() {
    return (
      <ComponentX>
        {this.props.children}
      </ComponentX>
    )
  }
}

Компонент X называется дочерним компонентом родительского компонента?

Я ценю любое объяснение. Заранее спасибо

Ответы [ 2 ]

1 голос
/ 23 октября 2019

Является ли ComponentX дочерним по отношению к родительскому компоненту?

NO.

ComponentX называется включающим компонентом из Parent's children.

Аналогично тому, как используются React.Fragments, без включающего элемента, появится предупреждение:

Ошибка синтаксического анализа: смежный JSXэлементы должны быть заключены в теги

0 голосов
/ 23 октября 2019 
class Parent extends React.Component {
  render() {
    return (
      <ComponentX>
        {this.props.children}
      </ComponentX>
    )
  }
}

this.props.children здесь имеет значение Parent, а когда вы передаете их детям ComponentX. В ComponentX вы получите это детей. Пример: 

class Parent extends React.Component {
  render() {
    return (
      <ComponentX>
        {this.props.children} // Here is children of Parent
      </ComponentX>
    )
  }
}

В ComponentX: 

class ComponentX extends React.Component {
  render() {
    return (
      <div>
        {this.props.children} // Here is children of ComponentX that you passed
        // in above
     </div>
    )
  }
}

В этом случае вы получаете детей Parent для использования в качестве потомков ComponentX

...