React: создание связей между компонентами

Я новичок в React JS. Возиться с поиском слушателей событий VanJS.

Что касается макета, я решил сохранить такие вещи, как a panel, a button, как отдельный компонент.

Теперь у меня есть компонент Movie и другой компонент Button. Как я могу вызвать изменение состояния фильма с помощью Button.onclick ()?.

Другими словами, как изменить компонент по событию, происходящему в другом компоненте?

Перед публикацией я прочитал:

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

  • useState
  • componentWillMount: непосредственно перед первоначальным рендерингом
  • componentDidMount: сразу после первоначального рендеринга
  • componentWillReceiveProps: когда компонент получает новые реквизиты
  • shouldComponentUpdate: до рендеринга, после получения новых свойств или состояния
  • componentWillUpdate: до рендеринга, после получения новых свойств или состояния.
  • componentDidUpdate: после того, как обновления компонентов сбрасываются в DOM
  • componentWillUnmount: непосредственно перед удалением компонента из DOM

Ниже приводится демонстрация, которая содержит Movie карточку и Button, при нажатии кнопки я хочу, чтобы изменился цвет фона карточки "Фильм"

Тестовая среда кода React TypeScript

код:

import * as React from "react";
import "./styles.css";
import styled from 'styled-components';

function CSSPropertiesToComponent(dict:React.CSSProperties){
  let str = '';
  for(const [key, value] of Object.entries(dict)){
      let clo = '';
      key.split('').forEach(lt=>{
          if(lt.toUpperCase() === lt){
              clo += '-' + lt.toLowerCase();
          }else{
              clo += lt;
          }
      });
      str += clo + ':' + value + ';';
  }
  return str;
}

class Movie extends React.Component<any, any>{
  public static style:React.CSSProperties|object = {
      width: "300px",
      height: "120px",
      display: "flex",
      justifyContent: "space-around",
      alignItems: "center",
      borderRadius: "20px",
      filter: "drop-shadow(0px 1px 3px #6d6d6d)",
      WebkitFilter: "drop-shadow(3px 3px 3px #6d6d6d)",
      backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
      fontSize: '2.5rem',
      margin: '20px',
      color: '#fff',
  }

  props:React.ComponentProps<any>;
  state:React.ComponentState;

  constructor(props:any) {
      super(props);
      this.props = props;
      this.state = {style: Object.assign({}, Movie.style)}
      this.changeColor = this.changeColor.bind(this);
  }

  changeColor():void{
      this.setState({style: Object.assign({}, Movie.style, {backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16)})});
  }

  render():JSX.Element{
      let StyledMovie = styled.div`
          ${CSSPropertiesToComponent(Movie.style)}
      `;

      return (
          <>
              <StyledMovie>{this.props.title}</StyledMovie>
          </>
      )
  }
}

export default function App() {
  let MV = new Movie({title: 'the Avengers'});
    return (
        <>
            {MV.render()}
            <button onClick={MV.changeColor}>Change Color</button>
        </>
    )
}

Однако при нажатии на кнопку изменения цвета она не работает и показывает предупреждение:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Movie component.

Если кто-нибудь предложит какое-нибудь предложение, я буду очень рад.


react-native reactjs typescript react-tsx
person duck    schedule 10.09.2020    source источник
comment
Это не самый лучший ответ на ваш вопрос, но показывает очень простой пример использования функциональных компонентов, передающих данные от родителя к потомку. https://stackblitz.com/edit/react-tswfof   -  person Jacob Smit    schedule 10.09.2020

Ответы (1)


arrow_upward
1
arrow_downward 

let MV = new Movie({title: 'the Avengers'});
    return (
        <>
            {MV.render()}
            <button onClick={MV.changeColor}>Change Color</button>
        </>
    )

Должно выглядеть (с использованием jsx или tsx):


onChangeColor(color) {
  setState({color: color}); // state won't be in Movie component !
}

// use React.Fragment if you don't want an additional div
return (
  <div>
    <Movie title={'the Avengers'} />
    <button onClick={onChangeColor}>Change Color</button>
  <div/>
)

Также на class Movie extends React.Component<any, any> вы устанавливаете оба общих параметра для любого, первый - это тип свойств компонента (входы и обратные вызовы), а второй - тип состояния компонента.


interface MovieProps {
  // ...
}

interface MovieState {
  // ...
}

class Movie extends React.Component<MovieProps, MovieState> { }

Как уже говорилось, глядя на ваш код, вам нужно сохранить состояние вне компонента Movie, вы можете сохранить App компонент в чистоте и сделать другой компонент для обертывания Movie и button, который будет отвечать за взаимодействие между ними.

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

person Ambroise Rabier    schedule 10.09.2020