如何添加另一种使用语义UI一个div？

Question

我有这个功能

createSection = () => {   
     let div = document.createElement("div")
     div.innerHTML =
                    `<section>
                        <Grid centered>
                            <Item.Header  style={{'paddingBottom': '20px', color: 'red'}} as='h1'>{this.state.contents.inputTitle}</Item.Header>
                        </Grid>
                        <Item.Description style={{'maxWidth': '100%'}}>
                            {this.state.contents.inputContent}
                        </Item.Description>
                        <Item.Extra></Item.Extra>
                    </section`             
     document.getElementById("teste").appendChild(div)
}

我想在div中添加部分

<div onClick={this.createSection} id='teste' style={{'backgroundColor':'#178776', 'boxShadow':'inset 0 3px 27px 19px rgba(15,56,94,.6)', 'borderRadius': '30px', padding: '30px'}}>    
</div>

但是，出现在DIV是：{this.state.contents.inputTitle} {this.state.contents.inputContent}我有这个做正常工作？

Answer 1

@Deborah Luperini，你不应该在这样的方式创建组件反应，因为它没有香草JS，你必须要么使用JSX，我做了working example

或最后的决定，而不是它使用React.createElement，你需要设置你的父元素，属性和孩子，我发现与无序列表的例子是最好的，可能是它可以帮助你，但我建议您不要使用它：

React.createElement("ul", {"className": "ingredients"},
   React.createElement("li", null, "1 lb Salmon"),
   React.createElement("li", null, "1 cup Pine Nuts"),
   React.createElement("li", null, "2 cups Butter Lettuce"),
   React.createElement("li", null, "1 Yellow Squash"),
   React.createElement("li", null, "1/2 cup Olive Oil"),
   React.createElement("li", null, "3 cloves of Garlic")
);

希望这会帮助你，良好的问候