используя методы componentDidMount и componentWillRecieveProps, не в состоянии получить реквизиты testHighlight от родителя

Question

Я новичок, чтобы реагировать. Я пытаюсь включить react-highlight-words в свое приложение для поиска текста. Поэтому я создал простое текстовое поле поиска, где мы можем искать текст. Прямо сейчас мое текстовое поле находится внутри SearchBar.js, а код компонента подсветки находится внутри Highlighter.js, там я использовал componentDidMount и componentWillRecieveProps, чтобы извлечь значения testHighlight из родительского компонента SearchBar. Но не печатает значений, поэтому я не могу передать внутрь Highlighter.

Можете ли вы сказать мне, как это исправить, чтобы в будущем я сам это исправил.

Предоставление моей песочницы и фрагмента кода ниже.

https://codesandbox.io/s/4qp1p2zvl4

SearchBar.js

class SearchBar extends React.Component {
  constructor() {
    super();
    this.state = {
      testHighlight: {}
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    console.log(e.target.value); // your search bar text
    let object = document.getElementById("myDiv");
    console.log(object.textContent); // your div text

    // now that you have the two strings you can do your search in your favorite way, for example:

    let searchBarText = e.target.value;
    console.log("searchBarText --->", searchBarText);

    let divText = object.textContent;
    console.log("divText --->", divText);

    if (divText.includes(searchBarText)) {
      console.log("the div text contains your search text");
    } else {
      console.log("the div text doesn't contain search text");
    }

    // this.setState({ testHighlight: response.data });

    this.setState({ testHighlight: searchBarText });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          className="input"
          onChange={this.handleChange}
          placeholder="Search..."
          // highlightText={this.handleChange}
          testHighlight={this.state.testHighlight}
        />
      </div>
    );
  }
}

Highlighter.js

class Highlighter extends React.Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    console.log("componentDidMount---->", this.props.testHighlight);
  }

  componentWillRecieveProps(nextProps) {
    console.log("componentWillRecieveProps---->", this.props.testHighlight);
    if (this.props.testHighlight !== nextProps.testHighlight) {
      this.setState({ testHighlight: nextProps.testHighlight });
    }
  }



  render() {
    return (
      <div>
        <Highlighter
          highlightClassName="YourHighlightClass"
          //searchWords={["and", "or", "the"]}
          searchWords={this.props.testHighlight}
          autoEscape={true}
          textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
        />
      </div>
    );
  }
}

Answer 1

Прямо сейчас вы не реализуете Highlighter.js. Вам нужно добавить его в свой метод возврата в SearchBar.js и передать ему реквизиты так:

<Highlighter
  testHighlight={this.state.testHighlight}
/>