Question

我正在尝试使用Electron和ReactJS创建一个泥（多用户地下城）客户端，供我自己学习和挑战自己。但似乎我在这次挑战中失败了。

我正在使用telnet-stream从服务器获取数据。

来自服务器的数据有ansi代码，因为它是基于telnet的通信。

问题在于速度。我不确定我是否做得对，但这里是负责显示数据的组件：

import React, { Component } from 'react';
import styles from './style.css';

type Props = {
  output: Array<any>
};

export default class ActionWindow extends Component<Props> {
  props: Props;

  componentDidMount() {
    this.scrollToBottom();
  }

  componentDidUpdate() {
    this.scrollToBottom();
  }

  scrollToBottom() {
    this.el.scrollIntoView({ behavior: 'smooth' });
  }

  render() {
    const output = this.props.output.map(chunk => chunk
        .replace('&', '&amp;')
        .replace('<', '&lt;')
        .replace('>', '&gt')
        .replace(/\x1b\[(\d+);(\d+);?(\d+)?m/g, '</span><span class="c-$1 c-$2 x-$3">')
    );
    return (
      <div className={styles.actionWindowWrapper}>
        <span dangerouslySetInnerHTML={{ __html: output }} />
        <div ref={el => { this.el = el; }} />
      </div>
    );
  }
}

这是正确的方法，还是有更快的方法？数据来自主要的App组件，道具。

Answer 1

为什么使用'dangerouslySetInnerHTML'？因为您将输出映射到html元素，所以您可以写：

render() {

return (
  <div className={styles.actionWindowWrapper}>
    this.props.output.map(chunk => chunk
    .replace('&', '&amp;')
    .replace('<', '&lt;')
    .replace('>', '&gt')
    .replace(/\x1b\[(\d+);(\d+);?(\d+)?m/g, '<span></span class="c-$1 c-$2 x-$3">')
    <div ref={el => { this.el = el; }} />
  </div>
);

}

我不完全理解你如何定期表达'.replace（/ \ x1b [（\ d +）;（\ d +）;？（\ d +）？m / g，''）'我不知道认为它输出正确的html因为结束标记

使用ReactJS显示数据的最快方法

1 个答案: