Javascript 如何在类之间传递变量

好的，所以我试图简化我正在做的一个项目，但是在我在互联网上读到的所有信息中，没有一个能回答我的问题。我的疑问是如何将变量（变量的名称及其值）从一个类传递到另一个类？我应该使用道具吗？我是否应该执行类似于

this.state.variable

的操作？怎样才能做到呢？我将编写一个示例代码，以更直观地展示我正在尝试做的事情，但是，这不是我的实际代码。谢谢你的帮助：）

class-FishInSea{
建造师（道具）{
超级（道具）；
this.setState（{fishInSea:100}）；
}
render（）{
返回(
海里的鱼：{这个州。Fishensea}
);
}
}
鱼类纲{
建造师（道具）{
超级（道具）；
this.setState（{fishInOcean:*1000}）；
}
render（）{
返回(
海洋中的鱼：{this.state.fishInOcean}
);
}
}
导出默认的FishInOcean；

您需要首先在中创建两个类来对组件进行反应。因为这两个类都修改状态，所以它们称为statefull组件。该类必须扩展React的基类，即Component

在构造函数中，我们只进行状态初始化，但不会修改那里的状态。但是您正在修改不正确的状态。而是将setState移动到componentDidMount

假设在FishInSea类中有FishInSea，并且希望将其作为道具传递给FishInOcean组件

检查以下两个已纠正的组件，它们是如何从一个组件传递到另一个组件的

  import React, { Component } from “react”;
  class FishInSea extends Component{
       constructor(props){
            super(props);
            this.state = {
                 fishInSea: 100
            }
       }
       componentDidMount(){
             this.setState({fishInSea: 100});
       }
       render(){
           const { fishInSea } = this.state;
                return(
                   <div>Fish in the sea: 
                         <FishInOcean fishInSea={fishInSea} />
                   </div>
            );
        }
   }


    import React, { Component } from “react”;
    class FishInOcean extends Component{
         constructor(props){
             super(props);
             this.state = {fishInOcean: 1000}
         }
         componentDidMount(){
             this.setState({fishInOcean: 1000});
          }
        render(){
           const { fishInOcean} = this.state;
           const { fishInSea } = this.props;
           return(
               <div>Fish in the ocean: {fishInOcean}
                    {fishInSea}
               </div>
           );
       }
   }

  export default FishInOcean;
  /*There was a typo*/

import React，{Component}来自“React”；
类FishInSea扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菲西萨：100
}
}
componentDidMount（）{
this.setState（{fishInSea:100}）；
}
render（）{
const{fishInSea}=this.state；
返回(
海里的鱼：
);
}
}
从“React”导入React，{Component}；
类FishInOcean扩展组件{
建造师（道具）{
超级（道具）；
this.state={fishInOcean:1000}
}
componentDidMount（）{
this.setState（{fishInOcean:1000}）；
}
render（）{
const{fishInOcean}=this.state；
const{fishInSea}=this.props；
返回(
海洋中的鱼：{fishInOcean}
{fishInSea}
);
}
}
导出默认的FishInOcean；
/*有一个打字错误*/

由于fishInOcean的初始状态是常量，它很可能应该最初设置为100和1000。但是如果我们想传递fishInSea的值，并使用它来操作fishInOcean的值，然后渲染它，该怎么办？这也行吗？@Dan抱歉，我无法理解你的问题，因为我解释得不够好？如果你愿意，我可以试试。但是如果没有，无论如何谢谢你的努力和时间，兄弟：）@Dan，欢迎你。如果答案能解决您的原始问题，请进行投票并接受

  import React, { Component } from “react”;
  class FishInSea extends Component{
       constructor(props){
            super(props);
            this.state = {
                 fishInSea: 100
            }
       }
       componentDidMount(){
             this.setState({fishInSea: 100});
       }
       render(){
           const { fishInSea } = this.state;
                return(
                   <div>Fish in the sea: 
                         <FishInOcean fishInSea={fishInSea} />
                   </div>
            );
        }
   }


    import React, { Component } from “react”;
    class FishInOcean extends Component{
         constructor(props){
             super(props);
             this.state = {fishInOcean: 1000}
         }
         componentDidMount(){
             this.setState({fishInOcean: 1000});
          }
        render(){
           const { fishInOcean} = this.state;
           const { fishInSea } = this.props;
           return(
               <div>Fish in the ocean: {fishInOcean}
                    {fishInSea}
               </div>
           );
       }
   }

  export default FishInOcean;
  /*There was a typo*/