修改

Question

我从API获得了一个HTML字符串：

<div><h1>something</h1><img src="something" /></div>

我想在onClick标记上添加img处理程序。我想过使用正则表达式替换，但强烈反对。

我是React的新手......你将如何解决这个问题？

任何链接或指向正确的方向都将受到高度赞赏！

修改

有没有办法以反应友好的方式为所有锚标签添加一个监听器？我想我可以检查锚标记的子项，如果有图像元素，那么我可以运行我的代码块。

Answer 1

我认为一个更惯用的React方法是将它重构为一个组件，充满它自己的onClick处理程序，然后通过props插入你的图像URL。像

这样的东西

class MyImg extends React.Component {
  onClick() {
    // foo
  }

  render() {
    return (
      <div onClick={this.onClick}>
        <h1>{this.props.foo}</h1>
        <img src={this.props.imgSrc} />
      </div>
    );
  }
}

Answer 2

您可以更新API以返回JSON而不是HTML吗？ JSON更易于操作，您可以动态创建反应元素，例如，让我们假设您的API返回：

{ 
  component: 'div',
  children: [
    { component: 'h1', text: 'Something here' },
    { component: 'img', src: 'something.jpg' },
  ],
}

如果你有这种响应很容易在运行时创建React元素，你也可以在创建这些组件时添加事件，例如：

class DynamicContent extends PureComponent {
  onImageClick = () => {
     // Do something here!
     console.log('Testing click!');
  }

  render() {
    const children = response.children;

    return React.createElement(response.component, null,
      React.createElement(children[0].component, null, children[0].text),
      React.createElement(children[1].component, {
        ...children[1],
        onClick: this.onImageClick, // <-- Adds the click event
      }),
    );
  }
}

您可能希望创建一个动态遍历响应对象并创建所需组件的实用程序。

ReactJS在给定HTML字符串的情况下将onClick处理程序添加到元素中

修改

2 个答案: