Reactjs 使用多元素条件句进行反应

我正在将现有应用程序转换为ReactJS。我发现有些事情很难在工作中做好。下面是我想做的

render () { 
    return (<div id="container">
        <div className="shared">shared content here</div>
        <div className="shared">shared content here</div>
        <div className="shared">shared content here</div>
        {featureAEnabled ? 
        (<div className="featureA">featureA enabled content</div>
        <div className="featureA">featureA enabled content</div>) :
        (<div className="old">featureA disabled content</div>
        <div className="old">featureA disabled content</div>)
    </div>);
}

render（）{
返回(
此处共享内容
此处共享内容
此处共享内容
{功能已启用？
（b）已启用的内容
（已启用的内容）：
（b）禁用的内容
（已禁用的内容）
);
}

问题是您不能在React中返回多个元素，必须始终返回单个元素

我目前的解决方案包括

重写所有css以允许元素封装这些特性开关中的任何一个

请执行以下操作：

代码：

render（）{
返回(
此处共享内容
此处共享内容
此处共享内容
{featureAEnabled&&featureAEnabled内容}
{featureAEnabled&&featureAEnabled内容}
{！featureAEnabled&&featureAEnabled内容}
{！featureAEnabled&&featureAEnabled内容}
);
}

---

有没有一种方法可以允许基于条件的代码块呈现多个元素，就像我的第一个代码片段一样？

一种方法是在呈现中切换一个类

let featureEnabledClasses = 'hidden';

if (myCondition === true) {
  featureEnabledClasses = '';
}

那你就可以上菜了

<div className={featureEnabledClasses}>featureA enabled content</div>

featureA启用的内容

理想情况下，您应该尝试在单独的组件中分离“FeatureEnabled”和“featureADisabled”元素，然后呈现它们

另一种方法是将“featureAEnabled”和“featureADisabled”元素放入数组中并返回。如下所示：

render() {
    let renderFeatureA = [
        <div >featureA enabled content</div>,
        <div >featureA enabled content</div>
    ];
    let disableFeatureA = [
        <div >featureA disabled content</div>,
        <div >featureA disabled content</div>
    ];

    let renderItems = featureAEnabled ? renderFeatureA : disableFeatureA;

    return (
    <div id="container">
        <div >shared content here</div>
        <div >shared content here</div>
        <div >shared content here</div>
        {renderItems}
    </div>
    )
};

render（）{
让renderFeatureA=[
已启用的内容，
启用尿素的内容
];
设禁用Featurea=[
包括禁用的内容，
尿素禁用内容
];
让renderItems=FeatureEnabled？RenderFeatureUrea:DisableFeatureUrea；
返回(
此处共享内容
此处共享内容
此处共享内容
{renderItems}
)
};

你可以将那些featureA和featureB div放在一个div na下？这是解决方案#1。这是完全可行的，除非我有很多代码要转换成ReactJS，这会大大降低转换速度。你需要添加键。键用于什么？当你将元素放入数组时，你需要添加

键=

@Sulthan Agreed.K当ReactJs需要更新dom时，eys很有帮助。但是在给定的场景中，我假设这些元素都是呈现的，没有任何条件涉及到哪些元素被呈现。然而，我只是指出了给定问题的可能解决方案。其他实现细节需要由编码人员处理。但是是的，键可以作为良好的实践添加。我不知道您可以将元素数组与其他元素一起使用，我认为它们是它们父母的唯一子女。这对我很有用。谢谢我的示例过于简单，但我想做的远不止更改类

render() {
    let renderFeatureA = [
        <div >featureA enabled content</div>,
        <div >featureA enabled content</div>
    ];
    let disableFeatureA = [
        <div >featureA disabled content</div>,
        <div >featureA disabled content</div>
    ];

    let renderItems = featureAEnabled ? renderFeatureA : disableFeatureA;

    return (
    <div id="container">
        <div >shared content here</div>
        <div >shared content here</div>
        <div >shared content here</div>
        {renderItems}
    </div>
    )
};