Question

我正在尝试将markdown文件转换为html。我可以使用名为showdown的程序包来执行此操作，但是goToPage组件可以连续运行，正如数百个不断流动的控制台日志所示。

以下代码允许用户在url中键入文件名，而快速服务器将返回markdown文件。然后，React将其转换为html并显示该html。我知道第一次运行后return div为空，并且取决于获取数据时正在更新的状态，但是我不知道在那之后如何中断循环。

class App extends Component {
  state = { myFile: '' }

  constructor(props) {
    super(props);

    this.goToPage = this.goToPage.bind(this);
  }

  goToPage = ({ match }) => {
    fetch('/' + match.params.filename)
      .then((res) => res.text())
      .then((text) => {
        console.log(text);
        var fileContents = text;

        var showdown = require('showdown'),
          converter = new showdown.Converter(),
          markdown = fileContents,
          html = converter.makeHtml(markdown);

        console.log(html);
        this.setState({ myFile: html });
      })
      .catch(err => {
        console.log(err);
      });

    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.myFile }} />
    )
  }

  render() {
    return (
      <Router>

        <Route path="/:filename" component={this.goToPage} />

      </Router >
    );
  }
}

export default App;

我对React还是很陌生，所以我不知道我的goToPage是否应该在同一班上-仍在学习基础知识。我很想知道我是否在做一些愚蠢的事情。

Answer 1

<Route path="/:filename" component={this.goToPage} />

此行要求路由器渲染this.goToPage中的内容作为上述路由的组成部分。但是，如果您检查goToPage函数，它将使用this.setState重新启用浏览器。该路线尝试再次渲染goToPage函数，并且循环重复。

相反，您需要做的是在路由/:filename中渲染另一个组件，并确保提取仅运行一次。

<Route path="/:filename" component={MarkdownConverter} />

现在，在MarkdownConverter组件中：

class MarkdownConverter extends Component {
  this.state = {
    myFile: ""
  }
  componentDidMount() {
    // All the logic for fetch and convert goes here.
  }
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.myFile }} />
    );
  }
}

React组件不断更新

1 个答案: