Question

我有一个元素，我想添加到我的身体的末端：

const nRecipe = 
<div id = "container">
<div className="recipe App" id="four" 
onClick={this.toggleRecipeList.bind(this)}>{this.state.recipeName}
</div>

<div style={{display:"none"}}>    
{this.state.value4.split(",").map((e)=>
  <p>{e}</p>)}

 <button onClick={this.deleteRecipe}>Delete</button>
<button name="4" onClick={this.openEditBox}>Edit</button>
</div></div>

创建此元素的按钮如下：

<button onClick={this.newRecipe.bind(this)}>Enter</button>

该功能定义如下：

newRecipe(){
document.body.appendChild({nRecipe});}

我也试过

newRecipe(){
document.body.insertAdjacentElement("beforeend", {nRecipe});}

我得到的错误消息是TypeError：

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

＆安培;＆安培;

TypeError: Failed to execute 'insertAdjacentElement' on 'Element': 
parameter 2 is not of type 'Element'.

我无法找到任何直接回答此问题的问题。我不希望在显示和隐藏元素之间切换，我想要一个按钮，可以使用文档对象模型方法创建由jsx定义的元素。

Answer 1

当您点击按钮时，您似乎试图显示元素：

使用州管理元素可见性：


    constructor(props) {
        super(props);
        this.state = {
         showNewRecipe: false
       };
    }

使用函数切换状态


    toggleNewRecipe(){
       this.setState(prevstate => ({
         ...prevState,
       showNewRecipe: !prevstate.showNewRecipe
     }));
    }

使用逻辑运算符在JSX中的任何位置呈现dom元素：


    {
     this.state.showNewRecipe && (
      "your dom/JSX element"
     )
    }

使用react jsx将jsx元素添加到body

1 个答案: