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

问题描述 投票:0回答:1

我有这个功能

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}我有这个做正常工作?

javascript html semantic-ui
1个回答
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")
);

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

© www.soinside.com 2019 - 2024. All rights reserved.