ReactJs-将功利函数传递给模式内部的段落

Question

I have a utilitarian funcion noMoreLonelyWords() that renders a text avoiding a single word in the end of line. Everything is working good when I import and use this function in a component. The problem is this funcion isn't rendering the paragraph inside the modal. How can I solve it?

React Component:

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 function: Note: This function is working good. The body of this function doesn't matter. It could be anything that change the paragraph. The goal is apply it into the Modal and modify its paragraph.

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

No action to change state. So componentDidUpdate() never called.

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

That is docs here: https://reactjs.org/docs/react-component.html#componentdidupdate

You should use componentDidMount()

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

Answer 2

I would suggest applying your function to the text itself instead of querying the dom directly. That's not good practice especially considering the effect of the function can be achieved without direct DOM manipulation. The reason you are accessing the DOM is to get the text of a paragraph but you don't need to as you already have that text in the render function.

  render() {
  return (
    <Modal>
      <h2><p>{noMoreLonelyWords('My text here!', 2)}</p></h2>
    </Modal>
  )
}

Answer 3

As @AvinKavish has mentioned, using componentDidMount() will not be effective in persisting the appearance of your component.

You're also forcefully manipulating the DOM by changing the innerHTML of your selectors. This is very anti-pattern and defeats the purpose of using React.

Let's say you wanted to make your component more complex. You might update the state of PortfolioPage by adding a new item, or you are connected to redux and you initialize some sort of action that brings in new props to your component. Your component will re-render itself with the new data, and it will revert back to its initial state, making everything that happened in componentDidMount() useless. componentDidMount() will not execute a second time.

Also I'm sure you probably find it weird to call noMoreLonelyWords after the component has already mounted. That would mean, the paragraphs were already displayed on the screen and then they shift erratically to fit inside your modal.

What you really should be doing is calling noMoreLonelyWords at the time of render , so your paragraphs are already adjusted correctly by the time the user sees your component.

To fix this, you should update noMoreLonelyWords() , instead of passing in the selector to update, just pass in the text itself.

export const noMoreLonelyWords = (words, numWords) => {
  var textArray = words.split(" ");
  var lastWords = textArray.splice(-numWords, numWords).join("\xa0");
  var textMinusLastWords = textArray.join(" ");
  var newLine = textMinusLastWords + " " + lastWords;
  return newLine;
};

This preserves a lot of the logic that you already wrote and will also not affect other elements outside of your component, which is what you are doing when you call document.querySelectorAll to get everything on the page and manipulate it.

Now we can bring in your updated noMoreLonelyWords() and use it by passing in any body of text you want to configure.

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

class PortfolioPage extends Component {
  state = {
    openModal: false
  };

  handleModal = () => {
    this.setState({
      openModal: !this.state.openModal
    });
  };

  createParagraphs = (paragraph, minWordsPerLine) => {
    return <p>{noMoreLonelyWords(paragraph, minWordsPerLine)}</p>;
  };

  render() {
    return (
      <div>
        {this.createParagraphs(
          "Hello friend. October arrived, spreading a damp chill over the grounds and into the castle. Madam Pomfrey, the nurse, was kept busy by a sudden spate of colds among the staff and students. Her Pepperup potion worked instantly, though it left the drinker smoking at the ears for several hours afterward. Ginny Weasley, who had been looking pale, was bullied into taking some by Percy. The steam pouring from under her vivid hair gave the impression that her whole head was on fire.",
          5
        )}
        <Modal open={this.state.openModal} onClose={this.handleModal}>
          <div>
            {this.createParagraphs(
              "Hello friend. October arrived, spreading a damp chill over the grounds and into the castle. Madam Pomfrey, the nurse, was kept busy by a sudden spate of colds among the staff and students. Her Pepperup potion worked instantly, though it left the drinker smoking at the ears for several hours afterward. Ginny Weasley, who had been looking pale, was bullied into taking some by Percy. The steam pouring from under her vivid hair gave the impression that her whole head was on fire.",
              15
            )}
          </div>
        </Modal>
        <button onClick={this.handleModal}>Open Modal</button>
      </div>
    );
  }
}

In the above we've defined a function called createParagraphs() . It accepts two arguments, a body of text and a number for the minimum count of words that are allowed to be on a line. It will call noMoreLonelyWords() and inject the output inside a <p></p> .

See it in action here: https://codesandbox.io/s/modal-setting-minimum-words-per-line-hy7bc

We will use this function twice:

1. Outside the Modal we call createParagraphs() pass in some text, and set the minimum count to 5. Now you see the last line has 5 words as we expected.
2. Inside the Modal we call createParagraphs() pass in the same text, and set the requirement to 15. Now the modal has 15 words in the last line.