Как получить доступ к другим компонентам реквизита. (React)

Верхний (и многие другие) ответы были построены на plt.pause(), но это был старый способ анимации сюжета в matplotlib.

TL; DR: вы можете захотеть использовать matplotlib.animation (, как указано в документации ).

После того, как вы разыграли различные ответы и фрагменты кода, на самом деле это был плавный способ бесконечного рисования входящих данных.

Вот мой код для быстрого запуска. Он отображает текущее время со случайным числом в [0, 100) каждые 200 мс бесконечно, одновременно обрабатывая автоматическое масштабирование вида:

from datetime import datetime
from matplotlib import pyplot
from matplotlib.animation import FuncAnimation
from random import randrange

x_data, y_data = [], []

figure = pyplot.figure()
line, = pyplot.plot_date(x_data, y_data, '-')

def update(frame):
    x_data.append(datetime.now())
    y_data.append(randrange(0, 100))
    line.set_data(x_data, y_data)
    figure.gca().relim()
    figure.gca().autoscale_view()
    return line,

animation = FuncAnimation(figure, update, interval=200)

pyplot.show()

Вы также можете исследовать blit для еще большей производительности , как в документации FuncAnimation .

0
задан André Gonçalves 13 March 2019 в 16:49
поделиться

2 ответа

Почему бы вам не получить доступ к этому значению из состояния component1?

class Component1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
    this.incrementCounter = this.incrementCounter.bind(this);

  }


  incrementCounter() {
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  }



  render() {
    return (
      <View>
        <Component2
          incrementCounter={this.incrementCounter}
          counter={this.state.counter} />
        <Component3 counter={this.state.counter} />
      </View>
    )

  }
}

Наконец, внутри Компонента2

<button onClick={this.props.incrementCounter}>
  click to increment counter
</button>

Это правило номер один в Реакт , дочерние компоненты не изменяют данные, которые они говорят с родительским компонентом через методы, переданные им. Это также улучшает поток данных, на самом деле, именно так вы должны использовать React.

0
ответ дан Ertan Kara 13 March 2019 в 16:49
поделиться

По сути, вам нужно передать <Component2> функцию обратного вызова в виде prop, которая возвращает значение, обновленное до вашего <Component1> (я сделал небольшой StackBlitz => https: / /stackblitz.com/edit/react-rym9h9?file=Component2.js), здесь у вас есть пример:

<Component1>:

[110 ]

<Component2>:

import React, { Component } from 'react';

class Component2 extends Component {
  componentDidMount() {
    const { value, returnUpdatedValue } = this.props;
    let updateValue = value + 100;


    returnUpdatedValue(updateValue)
  };

  render() {
    const { value } = this.props;

    return (
      <div>
      <h1>{value}</h1>
      </div>
    );
  }
}

export default Component2;

0
ответ дан Alberto Perez 13 March 2019 в 16:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: