Question

如何在点击按钮时在现有DOM（DOM中的任何元素）中追加或插入HTML元素？如果附加了，如何在单击该附加元素中的按钮后填充还是写入内容？我知道在Jquery这是一块蛋糕，但我希望React能帮我解决这个问题。

以下是代码：我想在'editor'div中填充添加<p></p>，并在点击按钮后填充内容。

任何帮助都将不胜感激。

export default class App extends React.Component{
  constructor(props){
    super(props);

  }

  parargraph(e){
    const parargraph = '<p></p>';
    alert(parargraph);
  }

  render(){
    return(
      <div className={"editorHolder " + (this.props.active ? 'show' : '' )  } onClick={this.hideEditor}>
      <div className="editBar">
      <ul>
        <li><button onClick={this.parargraph}>Parargraph</button></li>
        <li><button>H1</button><button>H2</button><button>H3</button><button>H4</button><button>H5</button><button>H6</button></li>
        <li><button>Image</button></li>
        <li><button>Link</button></li>
        <li><button>List</button></li>
        <li><button>Audio</button></li>
        <li><button>Video</button></li>
      </ul>
      </div>
      <div className="editor">
      </div>
      </div>
    );
  }
}

Answer 1

React提供了一种直接操作div的innerHTML的方法。

查看dangerouslySetHTML

对于您的代码，请尝试以下操作：

export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      content: ''
    }
    this.paragraph = this.paragraph.bind(this)
  }

  paragraph(e){
    const paragraph = '<p></p>'
    let content = this.state.content
    content += paragraph
    this.setState({content})
  }

  render(){
    return(
      <div className={"editorHolder " + (this.props.active ? 'show' : '' )  } onClick={this.hideEditor}>
      <div className="editBar">
      <ul>
        <li><button onClick={this.paragraph}>Paragraph</button></li>
        <li><button>H1</button><button>H2</button><button>H3</button><button>H4</button><button>H5</button><button>H6</button></li>
        <li><button>Image</button></li>
        <li><button>Link</button></li>
        <li><button>List</button></li>
        <li><button>Audio</button></li>
        <li><button>Video</button></li>
      </ul>
      </div>
      <div className="editor" dangerouslySetInnerHTML={{__html: this.state.content}}>
      </div>
      </div>
    );
  }
}

说明：您希望将编辑器的内容保持在状态，准备好更改并在单击任何按钮时添加更多内容。编辑器div将接收状态并在状态改变时更新其值。

PS：在构造函数中绑定组件方法是一种很好的做法，我已在示例代码中为您完成了这些操作。你也拼错了段落＃。

如何在React中的现有DOM中追加或插入HTML元素

1 个答案: