一个反应组件可以有多个子内容区域吗？

Question

假设我有一个简单的反应组件：

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  render: function() {
    return (
      <header className={styles.root}>
        // area for child content
        {this.props.children}
      </header>
    );
  }
});

现在让我们说，我想要两个，而不是任何子组件的一个区域，就像这样：

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  render: function() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          // logo children here
        </div>
        <div>
          // navigation children here
        </div>
      </header>
    );
  }
});

我知道我可以使用属性，但是对于大量的 html 内容来说这不是很优雅。如何以类似于 swig 中的named blocks 的方式做出反应？

---

命名块示例：

{% extends 'layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}
  {% parent %}
  <link rel="stylesheet" href="custom.css">
{% endblock %}

{% block content %}
<p>This is just an awesome page.</p>
{% endblock %}

您会看到这些块可以通过引用它们的名称来使用，从而允许“产生”多个内容区域。我希望有一种类似优雅的方式来做出反应，因为它使组件非常可组合。

Answer 1

import React, { Component } from 'react';
import styles from "./index.css";
import Logo from "./components/Logo";
import Navbar from "./components/Logo";

class Comp extends Component {
    render(){
        return (
            <Header className={styles.root}
                top={Logo}
                right={Navbar}
                />
        );
    }
}

class  Header extends Component {
    render(){
        let {top,right} =this.props;
        return (
            <header className={styles.root}>
                <div className={styles.logo}>
                    {top && <top />}
                </div>
                <div>
                    {right && <right />}
                </div>
            </header>
        );
    }
}

Answer 2

制作单独的组件 不要使用 props 将组件作为子组件传递。像这样的。

header.js

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  getComponent(key) {
     return this.props.children.filter( (comp) => {
             return comp.key === key;
     });
  }
  render: function() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          {this.getComponent('logo')}
        </div>
        <div>
         {this.getComponent('navbar'}
    
        </div>
      </header>
    );
  }
});

app.js

export default React.createClass({
      render: function() {
        return (
          <Header>
            <Logo key="logo"/>
            <Navbar key="navbar"/>
          </Header>
        );
      }
    });

Answer 3

您可以将道具视为孩子，因为从技术上讲，children 只是另一个道具。这种方法没有任何问题——React 贡献者自己建议你这样做 (Support multiple child insertion points)。

此外，如果您在一个庞大的工程师团队中工作，我还建议标准化您如何命名这些道具以及它们的标准行为 - 它们只是简单的内容还是您可以传递参数的回调。 react-placeholders 可以帮助你。因此，您的组件的代码可能如下所示：

// header.jsx
import React from 'react';
import withSlots from 'react-placeholders';

@withSlots('logo', 'navigation')
export default class Header extends React.Component {
  render() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          {this.props.header()}
        </div>
        <div>
          {this.props.navigation('home')}
        </div>
      </header>
    );
  }
}

这就是您嵌入该组件的方式

// app.jsx
import Header from 'header.jsx'

export default class Header extends React.Component {
  render() {
    return (
      <Header
        logoSlot={<img src="logo.svg" />}
        navigationSlot={(currentPage) => { 
          return <a href="#" style={{ color: currentPage ? 'blue' : 'red' }}>Home</a>
        }}
      />
    );
  }
}

Answer 4

这个问题启发了我。这是我的方法：

第一个子组件：TestA.tsx

import * as React from 'react';

export default class TestA extends React.Component {
    render () {
        return (
            <div className="TestA">{this.props.children}</div>
        )
    }
}

第二个子组件：TestB.tsx

import * as React from 'react';

export default class TestB extends React.Component {
    render () {
        return (
            <div className="TestB">{this.props.children}</div>
        )
    }
}

父组件：TestAB.tsx

import * as React from 'react';

type TestABProps = {
    children: React.ReactNode;
}

export default class TestAB extends React.Component<TestABProps> {

    //Loop through React nodes in children and get all instances of the specified component
    getComp( comp: string ): null | React.ReactNode | React.ReactNode[] {
        if( this.props.children instanceof Array ) {
            let nodes: React.ReactNode[] = [];
            for( let child of this.props.children ) {
                if( ((child as React.ReactElement)?.type as Function)?.name == comp ) {
                    nodes.push( child );
                }
            }
            return nodes.length > 1 ? nodes : nodes[0];
        }
        return null;
    }
    render () {
        return (
            <div className="AB">
                <div className ="A">
                    {this.getComp("TestA")}
                </div>
                <div>This is a DIV between the components</div>
                <div className ="B">
                    {this.getComp("TestB")}
                </div>
            </div>
        )
    }
}

如您所见，您只需将{this.getComp("YourComponentName")} 放置在您希望该组件的所有实例出现在您的父组件中的位置。

使用示例

<TestAB>
    <TestA>Foo</TestA>
    <TestB>Bar</TestB>
    <TestA>Foobar</TestA>
</TestAB>

使用非常简单直观。不需要键或其他任何东西，只需插入您的子组件而无需奇怪的语法。

生成的 HTML

<div class="AB">
    <div class="A">
        <div class="TestA">Foo</div>
        <div class="TestA">Foobar</div>
    </div>
    <div>This is a DIV between the components</div>
    <div class="B">
        <div class="TestB">Bar</div>
    </div>
</div>

请注意，您可以按任何顺序插入 TestAB 的子级 - 它们将被插入到正确的位置。

这一切当然可以改进，您可以根据自己的需要进行调整。例如，如果您放置了除 TestA 或 TestB 之外的任何子组件，它们将不会显示，这将是我的第一个改进。