react中如何使用jsx处理大段DOM的渲染逻辑？

Question

问题：在react中如何优雅的处理大段DOM的渲染逻辑呢？

业务场景：通过后端回传的参数渲染不同的dom结构，并且dom结构较为庞大。（虽然可以使用三元表达式进行判断，但是dom结构较为复杂时会造成代码阅读体验下降。同时多条件判断时三元表达式也有局限性。）

示例代码：

{
    this.state.data?dom1:dom2
}

Answer 1

可以试试这个插件 react-if

Answer 2

难道不是抽离成组件引用么