javascript - ReactJs - 将实用函数传递给模态内的段落

Question

我有一个实用函数 noMoreLonelyWords()，它呈现的文本避免在行尾出现一个单词。当我在组件中导入并使用此功能时，一切正常。问题是这个函数没有在模态中渲染段落。我该如何解决？

react 组件:

import React, { Component } from 'react'
import Modal from 'react-responsive-modal';
import { noMoreLonelyWords } from './utilities/utilities.js';

class PortfolioPage extends Component {
    componentDidUpdate() {
        noMoreLonelyWords("p", 2)
    }
    render() {
        return (
            <Modal>
                <p>My text here!</p>
            </Modal>
        )

    }
}

export default PortfolioPage

noMoreLonelyWords 函数: 注意:此功能运行良好。这个函数的主体并不重要。它可以是任何改变段落的东西。目标是将其应用到模态中并修改其段落。

export const noMoreLonelyWords = (selector, numWords) => {      
    var elems = document.querySelectorAll(selector);
    var i;
    for (i = 0; i < elems.length; ++i) { 
      var textArray = elems[i].innerText.split(" ");      
      var lastWords = textArray.splice(-numWords, numWords).join("&nbsp;");     
      var textMinusLastWords = textArray.join(" ");
      elems[i].innerHTML = textMinusLastWords + " " + lastWords;
    }
  }

Answer 1

没有改变状态的 Action 。所以 componentDidUpdate() 从未调用过。

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

这里是文档:https://reactjs.org/docs/react-component.html#componentdidupdate

你应该使用componentDidMount()

componentDidMount(){
    noMoreLonelyWords("p", 2)
}