反应：在组件之间建立连接

如何解决反应：在组件之间建立连接

我是React JS的初学者。忙着实现Vanjs事件监听器。

对于布局，我决定将a panel,a button之类的内容存储为单独的组件。

现在，我有一个组件Movie和另一个组件Button，如何通过Button.onclick（）触发电影的状态更改？。

换句话说，如何通过另一个组件上发生的事件来修改一个组件？

发布之前，我已阅读：

但是大量的方法却让我很困惑。

useState
componentwillMount：在初次渲染之前
componentDidMount：在初始渲染后立即显示
componentwillReceiveProps：组件收到新道具时
shouldComponentUpdate：在渲染之前，在收到新的道具或状态之后
componentwillUpdate：在渲染之前，在收到新的道具或状态之后。
componentDidUpdate：将组件的更新刷新到DOM
componentwillUnmount：在从DOM中删除组件之前

下面是一个演示，其中包含一个Movie卡和一个Button，单击该按钮时，我希望 Movie卡的背景色更改

React TypeScript Code Sandbox

代码：

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.

如果有人提出建议，我会很高兴的。

解决方法

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>上，将两个通用参数都设置为any，第一个是组件的“道具”类型（输入和回调），第二个是“类型”状态”。


interface MovieProps {
  // ...
}

interface MovieState {
  // ...
}

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

如前所述，查看您的代码，您需要将状态保存在Movie组件之外，您可能希望保持App组件干净，并使另一个组件包装Movie和{{1} }，这将负责处理两者之间的交互。

关于此代码，还有很多要说的，但是我无法涵盖全部内容，我建议您按照教程学习以增强React的基础知识。

反应：在组件之间建立连接

如何解决反应：在组件之间建立连接

解决方法

相关推荐