Создание пользовательских компонентов и Гнездование их

Question

Я заинтересован в этом что-то, как показано ниже в моих Реагировать приложения, т.е. создать мои пользовательские компоненты и гнездо их в обратном заявлении:

например:

render(){ 
    return(
     <ShoppingApp> 
      <Products> 
       <ProductDetail productID={product_id} /> 
      </Products> 
     </ShoppingApp> 
    ); 
} 

Вопросы:

1. Является ли это возможным/возможным с использованием ReactJS?

2. Если ответ на 1 да, то каков будет практический сценарий, когда эта структура может быть использована/выгоды (примером может помочь в понимании)

3. Как реализовать этот вид вложенности с обычаем компоненты?

PS: Я уже знаю синтаксис, в котором мы можем включить компонент в JSX внутри div, table,. , , , но вопрос здесь в том, как реализовать вложение пользовательских компонентов внутри друг друга в иерархии (как описано выше).

Заранее спасибо.

Answer 1

Если я правильно понимаю ваш вопрос, вы ищете что-то вроде специальной children опоры, которая передается каждый компонент по React (из документации)

Это особенно применимо, если вы не знаете, что дети для компонента будут раньше времени.

В вашем случае, это может быть реализовано примерно следующим образом -

class Products extends React.Component { 
    render() { 
    /* this.props.children here will be an array of all 
     * the children which can be custom components 
     * enclosed within the <Products> component 
     * when it is rendered 
     */ 
    return (
     <div className='products'> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

В реальном сценарии, если вы хотите, чтобы гнездиться в ProductDetail компонент внутри Products компонента, потому что вы хотите Products каким-то образом передать некоторую опору для каждого ProductDetail он содержит, вы можете использовать различные хорошо документированные утилиты, предоставляемые React.Children (документы)

так практический пример будет выглядеть следующим образом -

class Products extends React.Component { 
    getTransformedChildren() { 
    return React.Children.map(this.props.children, child => { 
     // if child is of type ProductsDetail, clone it so you can 
     // pass your own prop to it else return the child 
     const newChild = (child.type === ProductsDetail) ? 
     React.cloneElement(child, { category: this.props.category }) : 
     child 
     return newChild 
    } 
    render() { 
    return (
     <div className='products'> 
     {this.getTransformedChildren()} 
     </div> 
    ) 
    } 
} 

Так что ваше утверждение визуализации будет выглядеть следующим образом:

<Products category='groceries'> 
    <ProductDetails id='1' /> 
    <ProductDetails id='2' /> 
    <HelloWorld /> 
</Products> 

И в этом случае все внутренние ProductDetails дети будут иметь набор проп categories к groceries. Однако внутренний компонент HelloWorld не будет передаваться опорой categories, потому что это не тип ProductDetails.

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

Answer 2

Да выше структура возможно. Пройдя ProductDetail в качестве детей с кодом Products, затем пройдите Products в качестве детей ShoppingApp.

Этот сценарий полезен, когда у вас есть общие и многоразовые компоненты. Допустим, ShoppingApp имеют 10 Products и каждый Products имеют ProductDetails, в этом случае и можно использовать Products и ProductDetail компоненты в 10 раз, с помощью цикла вы можете создать компонент 10 Products и ProductDetail. Поскольку все Products будут иметь такие же свойства, как имя, цена и т. Д., Вы можете легко написать повторно используемые компоненты и просто передать данные внутри компонентов в качестве реквизита.

Как это:

_createProductList(){ 
    let products = this.state.products; 
    return products.map((product,i)=>{ 
     return <Products key={i} data={product}> 
        <ProductDetail data={product}> 
        </ProductDetail> 
       </Products> 
    }) 
} 

<ShoppingApp> 
    {this._createProductList()} 
</ShoppingApp> 

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

_createProductList(){ 
    let products = this.state.products; 
    return products.map((product,i)=>{ 
     return <Products key={i} data={product}/> 
    }) 
} 

<ShoppingApp> 
    {this._createProductList()} 
</ShoppingApp> 

И внутри Products Используйте ProductDetails в визуализации. Не нужно передавать его, как дети Product.

Надеется, что это поможет вам понять :)