React / Redux / JavaScript: как передать обратный вызов в строковом формате, после чего в рендерере заставить его работать?

Question

У меня есть чатбот по обслуживанию клиентов, который автоматически отвечает в зависимости от того, что вводит клиент.В некоторых случаях я хочу отображать не только текст, но и кнопку в сообщении.Например, ответ бота может выглядеть так:

const reply_msg = "<p>Do you mean you have some problems about blue screen?</p>
<ul>
    <li><button onclick={this._handleOnClickYes}>Yes</button></li>
    <li><button onclick={this._handleOnClickNo}>No</button></li>
</ul>"

Этот код находится в моем редукторе, и я передаю его в состояние приложения: return [... state, new_msg]

This._handleOnClickYes - это то, что я хочу назвать обратным вызовом компонента:

export class Messages extends React.Component {
    ....

    _handleOnClickYes(e){
        this.props.sendQuery("Yes");
        // then do something with e
    }

    _handleOnClickNo(e){
        this.props.sendQuery("No");
        // then do something with e
    }

    render(){
        return(
              <div>
                <table className="message_table>
                  {this.props.messages.map(msg => {
                      <tr className="msg-class"><td>{msg}</td></tr>
                      }
                  )}
        ）
    }
}

Однако, когда компонент получает реквизиты, он не может распознать обратный вызов как строку, как я могу сделать такую ​​динамическую кнопку и передатьстрока в компонент, а затем сделать ее функцией обратного вызова onclick в компоненте?

Спасибо,

Answer 1

Интересно, открыты ли вы для каких-либо изменений в коде?Я думаю, что для вас может быть полезно хранить сообщения как объекты, а не как строки.

const reply_msg = {
  text: "Do you mean you have some problems about blue screen?",
  expectResponse: true
}

export class Messages extends React.Component {
  render () {
    return (
      <div>
        <table className="message_table>
          {this.props.messages.map(msg =>
            <tr className="msg-class">
              <td>
                {msg.text}
                {msg.expectResponse &&
                  <ul>
                    <li><button onclick={this._handleOnClickYes}>Yes</button></li>
                    <li><button onclick={this._handleOnClickNo}>No</button></li>
                  </ul>
                }
              </td>
            </tr>
          )}
        </table>
      </div>
    )
  }
}

Выполнение этого таким образом даст вам несколько важных преимуществ:

• ВыВам больше не нужно будет хранить информацию о представлении (HTML-код в строке) в состоянии, что облегчает управление и изменение,
• с логикой пользовательского интерфейса только в компоненте сделает ваше приложение намного более устойчивымк ошибкам.Вам больше не придется помнить об изменении пользовательского интерфейса в строке при изменении компонента (представьте, что вы захотите переименовать эти обратные вызовы _handleXXX),
• Вам больше не придется беспокоиться о React notраспознавать что-либо в строке.