Javascript 特定引导类的reactJS中的条件值取决于呈现的项目数？

我是新手。ProductInfo是我项目中的一张卡片，用户可以用它填写信息。我想在我的ReactJS代码中，在Product const的下面设置一个条件：

如果只填写了两张ProductInfo卡，则对类名应用col-md-6，以便这两张卡在页面上居中。如果填写了两张以上的ProductInfo卡，则使用col-md-4。我该怎么做呢

const ProductInfo = ({ title, blurb }) => (
    <div>
        {title && <h3 className="color-accent">{title}</h3>}
        {blurb &&
            <span dangerouslySetInnerHTML={{__html: productBlurb}} />
        }
    </div>
);

const Product = (props) => (
//If only two ProductInfo cards are present, apply a boostrap class of col-md-6, otherwise apply the bootstrap class below
    <div className="hs-product col-xs-12 col-sm-12 col-md-4" >
        {props.productIconLink ?
            <a href={props.link} target="_blank">
                <ProductInfo {...props} />
            </a>
        :
            <ProductInfo {...props} />
        }
    </div>
);

constproductinfo=（{title，blurb}）=>(
{title&&{title}
{blurb&&
}
);
常量产品=（道具）=>(
//如果只有两个ProductInfo卡，请应用col-md-6的bootstrap类，否则应用下面的bootstrap类
{props.productIconLink？
:
}
);

我建议您通过道具将ProductInfo数据传递给Product。您可以使用如下结构：

const ProductInfoData = [
 {
   title: 'title1',
   blurb: 'blurb1'
 },
 {
  title: 'title2',
  blurb: 'blurb2'
 },
 ...
]

const Product = (props) => {
    const className = 'hs-product col-xs-12 col-sm-12 ' + this.props.productInfoData.length == 2 ? 'col-md-6' : 'col-md-4';
    return (
        <div className={className}>
            {this.props.productInfoData.map((data) => {
                if (this.props.productIconLink) {
                    return (
                        <a href={props.link} target="_blank">
                            <ProductInfo {...data} />
                        </a>
                    )
                } else return <ProductInfo {...data} />;
             })}
        </div>
    );
};

使用这种方法，您可以映射整个数组并渲染每个ProductInfo。使用

props.productInfoData.length

，您甚至可以知道要渲染多少ProductInfo组件。你可以这样做：

const ProductInfoData = [
 {
   title: 'title1',
   blurb: 'blurb1'
 },
 {
  title: 'title2',
  blurb: 'blurb2'
 },
 ...
]

const Product = (props) => {
    const className = 'hs-product col-xs-12 col-sm-12 ' + this.props.productInfoData.length == 2 ? 'col-md-6' : 'col-md-4';
    return (
        <div className={className}>
            {this.props.productInfoData.map((data) => {
                if (this.props.productIconLink) {
                    return (
                        <a href={props.link} target="_blank">
                            <ProductInfo {...data} />
                        </a>
                    )
                } else return <ProductInfo {...data} />;
             })}
        </div>
    );
};

const产品=（道具）=>{
const className='hs product col-xs-12 col-sm-12'+this.props.productInfoData.length==2？'col-md-6'：'col-md-4'；
返回(
{this.props.productInfoData.map（（数据）=>{
if（this.props.productIconLink）{
返回(
)
}否则返回；
})}
);
};

这是渲染

的方式：

const ProductInfoData=[
{
标题：“标题1”，
blurb:“blurb1”
},
...
]

另外，如果我是你，我会避免使用

危险的HTML

。您通常不必使用它，并且可以重写组件，使它们不需要它