Блог

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

это мой пример кода чат-бота :

 
     {
                  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;
    ................
 

Когда пользователь нажимает на опцию внутри чат-бота, компонент калькуляторы должен выходить из чат-бота. Как я могу это сделать?

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

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

до этого вы бы настроили состояние optionClicked в

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

и переключатель функций

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

Затем в чат-боте вы нажмете на кнопку:

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

Теперь, нажав на кнопку, вы должны переключить компонент за пределы чат-бота.