Reactjs 如何使用react根据条件呈现重复代码？

我是react编程新手，我想知道如何根据共享相同类的特定条件呈现内容

下面是我的代码

render = () => {
    const data = this.props.data;

    return <div className="wrapper">
        {this.data.status === 'ready' && this.state.missing &&
            <div className="unknown">
                <div className="status missing">content1</div>
            </div>
        }
        {this.data.status === 'incomplete' &&
            <div className="unknown">
                <div className="status incomplete">content2</div>
            </div>
        }
        {this.data.status === 'failed' &&
            <div className="unknown">
                <div className="status failed">content 3</div>
            </div>
        }
    }

render=（）=>{
const data=this.props.data；
返回
{this.data.status==='ready'&&this.state.missing&&
内容1
}
{this.data.status==='未完成'&&
内容2
}
{this.data.status=='失败'&&
内容3
}
}

---

如何重构上述代码。我觉得这是重复的。有人能帮我吗。谢谢。

你能再详细说明一下条件吗？您是否总是比较某个输入（在这种情况下，添加嵌套的

switch

语句可能会有所帮助，或者每个条件都使用新变量

假设您的条件是独立的，您可以对如下元素使用生成器函数：

getStatusComponent = (statusClass,content) => {
    return (
        <div className="unknown">
            <div className={'status' + statusClass}>{content}</div>
        </div>
     )
}

render = () => {
const data = this.props.data;

return <div className="wrapper">
    {condition_1 && condition_2 && getStatusComponent('missing',content1)}
    {condition_3 && getStatusComponent('incomplete',content2)}
    {condition_4 && getStatusComponent('failed',content3)}
}

getStatusComponent=（状态类，内容）=>{
返回(
{content}
)
}
渲染=（）=>{
const data=this.props.data；
返回
{condition_1&&condition_2&&getStatusComponent（'missing'，content1）}
{condition_3&&getStatusComponent（'complete'，content2）}
{condition_4&&getStatusComponent（'failed'，content3）}
}

这在我看来还不错。这种模式相当常见。您可以合并所有案例共享的div.unknown

render = () => {
const data = this.props.data;

return <div className="wrapper">
    <div className="unknown">
        {condition_1 && condition_2 &&
            <div className="status missing">content1</div>
        }
        {condition_3 &&
            <div className="status incomplete">content2</div>
        }
        {condition_4 &&
            <div className="status failed">content 3</div>
        }
    </div>
}

render=（）=>{
const data=this.props.data；
返回
{condition_1&&condition_2&&
内容1
}
{条件_3&&
内容2
}
{条件4&&
内容3
}
}

如果内容1和内容2真的是冗长的而你不想这样，你可以考虑看到它们共享多少标记，并简单地交换它的某些部分。换句话说，把条件检查移到树的最下边。

const getClassname = (condition_1, condition_2, condition_3, condition_4) => {
    if (condition_1 && condition_2) { return 'status missing' }
    if (condition_3) { return 'status incomplete' }
    if (condition_4) { return 'status failed' }
    return null;
}


render = () => {
const data = this.props.data;
return <div className="wrapper">
    <div className="unknown">
        <div className={getClassname(condition_1, condition_2, condition_3, condition_4)}>
            content {/*you now need to decide how to generate content. You can make a `getContent` function, or perhaps do more swapping on a case-by-case basis. It depends on your content*/}
        </div>
    </div>
}

const getClassname=（条件_1、条件_2、条件_3、条件_4）=>{
如果（条件1和条件2）{return'status missing'}
如果（条件_3）{返回“状态不完整”}
如果（条件_4）{返回“状态失败”}
返回null；
}
渲染=（）=>{
const data=this.props.data；
返回
内容{/*您现在需要决定如何生成内容。您可以创建一个“getContent”函数，或者根据具体情况进行更多交换。这取决于您的内容*/}
}

将不同的值分配给变量，例如：

className

，然后在标记中使用这些变量：

同意，但您的示例不容易进行重构。
condition\ux
和
content\ux
从何而来？我使用condition\u1、condition\u2等等……来表示变量a我们不一样。更新了我的代码。