如何在另一个中使用语义 ui 添加 div？

debugcn 发表于 Dev

黛博拉·L·克里斯汀

我有这个功能

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}我必须为此做些什么才能正常工作？

最大限度

@Deborah Luperini，你不应该在 React 中以这种方式创建组件，因为它不是 vanilla JS，你必须要么使用 JSX，我做了一个工作示例

或最后的决定而不是最好的它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")
);

希望能帮到你，祝好

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。