Question

我很好奇是否有一种方法可以将JSX存储在服务器上，然后通过API调用将其检索并呈现。过去，我已经能够使用HTML和jQuery脚本来实现模态之类的功能。 jQuery将提供诸如“关闭”按钮之类的功能。这使其他人可以控制对该内容的更新，而无需开发人员每次都进行代码更新。但是，现在我在网站上使用React了，我看不到可以像这样存储JSX并且仍然可以使用onClick函数的方法：

<div className="modal">
  <div className="container">
    <div className="close-btn">
      <button className="btn" onClick={this.handleClick}>
        <i className="delete-icon"></i>
      </button>
    </div>
    <div className="content">
      <p>Here is where all our content will go!</p>
    </div>
  </div>
</div>

当然，如果我只存储内容，则可以使用dangerouslySetInnerHTML在JSX中呈现它。但是，由于可以有不同的按钮，功能等。我希望将JSX存储在服务器上，通过API进行获取，然后将其呈现到页面上。 onClick函数本身可以存在于呈现它的组件中，也可以存在于onClick中：

<button 
    className="btn" 
    onClick={() => {this.setState({modalOpen: !this.state.modalOpen})}
>
  <i className="delete-icon"></i>
</button>

这里唯一的问题是我需要从内联onClick函数调用setState()，但不确定setState()或this是否可用。即使函数存在于组件中，我仍然不确定this是否可用于它。

无论如何，我不确定是否可以使用NPM软件包或方法来实现这一目标？如果有人有任何想法，请告诉我。尝试任何使之起作用的方法。预先感谢！

将JSX存储在服务器上，通过API进行检索，并使用onClick函数进行渲染

0 个答案: