如何使用 PReact 访问多个 props.children

Question

我正在使用 astro 并使用 PReact 和 Bootstrap 创建了这个 Card 组件

卡.jsx

import "bootstrap/dist/css/bootstrap.min.css";

export default function Card(props) {
    return (  
        <div class="card" style={{ marginBottom: '20px' }}>
            <div class="card-header" style={{ color: '#ACEB98' }}>
                {props.children[0]} <b>{props.cardTitle}</b>
            </div>
            <div class="card-body">
                <p class="card-text">
                    {props.children[1]}
                </p>
            </div>
        </div>
    );
  }

在我的 astro 页面上，我按以下方式使用该组件

index.astro

<Card cardTitle="Funfact">
    <i class="fa-solid fa-ban-smoking"></i>
    <FunFact />
</Card>

但似乎您无法像数组一样访问不同的子项。有什么建议吗？

Answer 1

您可以使用

renderHeaderPrefix

道具。

卡.jsx

import "bootstrap/dist/css/bootstrap.min.css";

export default function Card(props) {
    return (  
        <div class="card" style={{ marginBottom: '20px' }}>
            <div class="card-header" style={{ color: '#ACEB98' }}>
                {props.renderHeaderPrefix} <b>{props.cardTitle}</b>
            </div>
            <div class="card-body">
                <p class="card-text">
                    {props.children}
                </p>
            </div>
        </div>
    );
  }

index.astro

<Card cardTitle="Funfact" renderHeaderPrefix={<i class="fa-solid fa-ban-smoking"></i>}>    
    <FunFact />
</Card>