如何导航到新的 page/Component ？反应聊天机器人

Question

我一直在尝试创建一个基于反应的聊天机器人，因为如果用户从聊天机器人中按下 option/button，我想在聊天机器人之外并在同一页面上显示一个组件。

这是我的示例聊天机器人代码：


     {
                  id: "summary-end-graph",
                  asMessage: false,
    
                  component: <Calculators/>,
                  
                  trigger: "summary-ends-last",
                  waitAction : true,
                  delay: 1300,
    
                },

我在这里提到的是 计算器 是一个不同的组件

计算器组件的示例代码

    class Calculators extends Component {
      constructor(props) {
        super(props);  
        const { steps } = this.props;
        const { salaryanswer, rate } = steps;
    ................

当用户点击聊天机器人中的一个选项时，计算器组件应该会从聊天机器人中弹出。我该怎么做？

Answer 1

可以先调用chatbot外的组件，然后添加条件渲染，如下：

<ChatBot optionClicked={this.toggleOption} />
{
  optionClicked ?
    <Calculators/> :
    <div></div>
}

在此之前，您将在

中设置 optionClicked 状态

    constructor(props) {
    super(props);
    this.state = {optionClicked : false};
    }

和一个函数 toggleOption

toggleOption = () => {
    this.setState({ optionClicked: !optionClicked })
  }

然后在聊天机器人中点击按钮：

    <button onClick={() => this.props.optionClicked()}>Option</button>

现在单击该按钮应该会切换聊天机器人外部的组件。

如何导航到新的 page/Component ？反应聊天机器人

How to navigate to a new page/Component ? react chatbot

chatbot

reactjs