Блог

Главная - Вопросы по программированию - Как повторно отобразить родительский компонент из дочернего компонента

Как повторно отобразить родительский компонент из дочернего компонента

#javascript #reactjs

#javascript #reactjs

Вопрос:

родительский компонент имеет тег p, который анимирует его внутренний текст. анимация работает, когда я обновляю страницу.

вот родительский компонент:

 import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
    rerender=()=>{
        this.forceUpdate()
    }
    render() {
        return (
            <div>
                <p className='animate-left'>Animation</p>
                <Child rerender={this.rerender}/>
            </div>
        );
    }
}

export default Parent;

вот дочерний компонент:

 import React, { Component } from 'react';

class Child extends Component {
    clickHandler=()=>{
        this.props.rerender()
    }
    render() {
        return (
            <div>
                <button onClick={this.clickHandler}>Click</button>
            </div>
        );
    }
}

export default Child;

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

Комментарии:

1. Можете ли вы предоставить animate-left более подробную информацию?

2. @Yung-DaLinLynda, я использую css-фреймворк с именем ‘W3.CSS’. я удаляю ‘w3-‘ из имени класса. В css нет проблем. когда я обновляю страницу, анимация работает хорошо. но когда я нажимаю кнопку, она не работает. w3schools.com/w3css /…

Ответ №1:

Вы должны иметь state в родительском компоненте и передавать это состояние дочернему компоненту:

 import React, { Component } from "react";
import Child from "./Child";

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }
  rerender = () => {
    this.forceUpdate();
  };
  forceUpdate = () => {
    this.setState((state) => ({
      counter: state.counter   1
    }));
  };
  render() {
    console.log("got rendered");
    return (
      <div>
        <p className="animate-left" key={this.state.counter}>Animation</p>
        <Child rerender={this.rerender} />
      </div>
    );
  }
}

export default Parent;

и в дочернем компоненте обновите это состояние:

 import React, { Component } from "react";

class Child extends Component {
  clickHandler = () => {
    this.props.rerender();
  };
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Click</button>
      </div>
    );
  }
}

export default Child;

Комментарии:

1. это не работает. но когда я нажимаю кнопку, console.log print отображается , но анимация не работает

2. Каково содержимое animate-left класса?

3. .animate-left{позиция: относительная;анимация: аниматор 0.4с}@ключевые кадры аниматор{от{слева: -300 пикселей; непрозрачность: 0} до{слева: 0;непрозрачность: 1}}

4. чтобы принудительно добавить анимацию key={this.state.counter} в p тег, я отредактирую свой ответ.