小编huv*_*v1k的帖子

我正在尝试为Chrome创建扩展名，该扩展名会更改Facebook时间轴的DOM。Chrome扩展程序无法注入由页面创建的var或函数：https : //developer.chrome.com/extensions/content_scripts#execution-environment

那么它可能会改变反应应用程序的呈现方式吗？我正在尝试手动更改文本：

var elements = document.querySelectorAll('.UFILikeLink');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.innerHTML = element.innerHTML.replace(/Like/g, 'ORly?');
}

但是之后，类似组件中断，并且当我更改反应时，出现了与预期相同的文本。有什么提示或可能改变而不破坏整个应用程序的DOM？

我在回应视频时遇到问题.它以某种方式重叠视频.在源代码中它是正确的,但在页面查看中它不正确.它只发生在一个视频中.每次它发生在不同的视频等.

签入对象检查员时.我有工作的东西在PHP,但有反应正在做这个渲染问题我不知道它的浏览器渲染问题或reactjs.我在所有浏览器上尝试过并做同样的事情.

图像上的渲染问题

第二行和第二列中的视频来源:

<a href="https://instagram.com/p/9QfapSvLHD/" target="_blank" class="life-one-photo table-cell modal" data-reactid=".0.0.$5">
   <video loop="" autoplay="" muted="" poster="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/12145465_444078379115659_399268826_n.jpg" class="life-one-photo-video" data-reactid=".0.0.$5.0">
     <source src="https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/12136722_988951267856293_201072634_n.mp4" data-reactid=".0.0.$5.0.0">
  </video>
</a>

第二行和第四列的来源:

<a href="https://instagram.com/p/9HYbUYvLIT/" target="_blank" class="life-one-photo table-cell modal" data-reactid=".0.0.$7">
  <video loop="" autoplay="" muted="" poster="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/12142112_830542177065598_1671839696_n.jpg" class="life-one-photo-video" data-reactid=".0.0.$7.0">
    <source src="https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/12125856_1718151458404599_30943699_n.mp4" data-reactid=".0.0.$7.0.0">
  </video>
</a>

你可以看到来源不同,但视频仍然相同,我不知道这里发生了什么.另外如果使用react而不是在php中渲染时需要更多的cpu.我有相同的东西由PHP呈现,它工作得很好,React代码片段创建帖子:

export default class Post extends Component {
  render() {
    const data = this.props.image.type === 'video' ?
      <video loop autoPlay muted poster={this.props.image.source} className="life-one-photo-video">
        <source src={this.props.image.sourceVideo}/>
      </video> :

    <img src={this.props.image.source} className="life-one-photo-img"/>

    return (
      <a href={this.props.image.link} target="_blank" className="life-one-photo table-cell …