javascript - 创建自定义组件并嵌套它们

Question

我有兴趣在我的 React 应用程序中做类似下面的事情，即创建我的自定义组件并将它们嵌套在 return 语句中:

例如:

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

问题:

1. 使用 ReactJS 是否可能/可行？

2. 如果对 1 的回答是肯定的，那么当这个结构可以使用/受益时的实际场景是什么(一个例子有助于理解)

3. 如何用自定义组件实现这种嵌套？

PS:我已经知道我们可以在 JSX 中将组件包含在 div、table 中的语法。 . . ，但这里的问题是如何在层次结构中实现彼此嵌套的自定义组件(如上所述)。

提前致谢。

Answer 1

如果我正确理解你的问题，你正在寻找类似特殊 children prop 的东西，它由 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要将一些 prop 传递给它包含的每个 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 类型。

另一个使用此范例的实际应用是，如果您希望父自定义组件将内联样式传递给它的所有或部分子组件，并且如果您正在编写自己的库，这将非常有用。