Question

在Java中，我们有静态成员，它对所有实例都是相同的副本，是否有任何方法可以在react中激活相同的成员

我已经使用 redux 解决了该问题，但是我很想通过使用 静态成员

来解决该问题。

在Java

public class Cart {

    static int totalItemInCart = 0; 
}


class Order{

    static boolean pushToCart() {

        Cart.totalItemInCart += Cart.totalItemInCart+1;     
        return true;
    }
}

class CancelOrder{  

    static boolean removeFromCart() {

        Cart.totalItemInCart += Cart.totalItemInCart-1;     
        return true;
    }
}

class User {

    public static void main(String[] args) {

        Order.pushToCart(); // item added to cart
        Order.pushToCart(); // item added to cart
        CancelOrder.removeFromCart(); // one item removed from cart 

        // if print the count we will get totalItemInCart is 2 
        System.out.println("number of items in cart" + Cart.totalItemInCart);
    }

}

现在我想在React中做同样的事情，有什么方法可以在多个实例中访问类成员。

到目前为止，

在反应中我只能访问初始值

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>Count : {new Count().state.count} </h1>;
  }
}

class Count extends Component{
  constructor(props) {
    super(props);
    this.state={
      count:0
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

输出将为

Count：{new Count（）。state.count}

Answer 1

一种方法是为该类分配一个变量，以便该类的每个实例都将包含该变量。此值不是完全静态的，因为可以通过this.variableName = 'newValue'重新分配。

class MyComponent extends React.Component {
    variableName = 'value'

    render() {
      return <div>{this.variableName}</div>
    }
}

或者，您可以将其设置为返回常量的方法，在这种情况下，value不能再被覆盖。

const value = 'value'
class MyComponent extends React.Component {
    getValue() {
      return value
    }

    render() {
      return <div>{this.variableName}</div>
    }
}

此外，假设静态值可能会发生变化，并且您希望所有组件都能够读取更新后的值（而不使用redux），那么可以将其包装在一个对象中。

或者，您可以将其设置为返回常量的方法，在这种情况下，value不能再被覆盖。

const staticProperty = {
  value: 'value'
}
class MyComponent extends React.Component {
    getValue() {
      return staticProperty.value
    }

    render() {
      return <div>{this.variableName}</div>
    }
}

在上面的示例中，由于staticValue是可变的，因此您可以运行staticValue.value = 'some new value'，它将更新该值。下次任何组件调用this.getvalue()时，它们将得到my new value。这种方法的问题在于，staticValue.value的更改不会触发组件的更新，因为没有发生prop或状态更改。

如果您希望组件接收有关属性更改的更新，那么此时您将重新实现Redux，我建议您使用Redux。您需要预订每个组件以跟踪对状态的特定部分的更改，并且可以通过查看Redux源代码来了解如何完成此操作：https://github.com/reduxjs/redux/blob/master/src/createStore.js

Answer 2

Javascript（基于React的）不是像Java那样真正的OOP，它是prototype type based language，因此类和静态变量没有直接的等效项。

在对这些全局性内容进行反应时，我们将使用Redux进行数据处理，或使用React.Context api进行应用程序全局状态处理。

但是，使用ES6，您可以编写类似此类的语法

class Cart {
  static count = 0;

  add = () => {
    Cart.count++;
  };
  remove = () => {
    Cart.count--;
  };

  print = () => {
    console.log(Cart.count);
  };
}

与Java的类变量非常相似。您可以尝试此示例，在渲染时注意，该值仍然相同。 https://codesandbox.io/s/wo62022jo5

Answer 3

请通过链接https://codesandbox.io/s/wnxp7rzvjw进行操作，我已找到解决方法

我使用一个父类为这两个类创建一个公共实例

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      countInstance: new Cart(this)
    };
  }

  onPlus = () => {
    this.state.countInstance.state.count += 1;
    this.state.countInstance.render();
  };

  render() {
    return (
      <div>
        <Increment countInstance={this.state.countInstance} />
        <Decrement countInstance={this.state.countInstance} />
      </div>
    );
  }
}

class Increment extends Component {
  constructor(props) {
    super(props);
  }

  onPlus = () => {
    this.props.countInstance.state.count += 1;
    this.props.countInstance.render();
  };

  render() {
    return (
      <div>
        <h1>Count in first componet: {this.props.countInstance.state.count}</h1>
        <button onClick={this.onPlus}>+</button>
      </div>
    );
  }
}

class Decrement extends Component {
  constructor(props) {
    super(props);
  }

  onMinus = () => {
    this.props.countInstance.state.count -= 1;
    this.props.countInstance.render();
  };

  render() {
    return (
      <div>
        <h1>
          Count in second componet : {this.props.countInstance.state.count}
        </h1>
        <button onClick={this.onMinus}>-</button>
      </div>
    );
  }
}

class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  updateParent = () => {
    this.props.setState({
      update: !this.state.update
    });
  };
  render() {
    {
      this.updateParent();
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我们可以在react中创建静态成员吗？

3 个答案:

我们可以在react中创建静态成员吗​​？

3 个答案:

我们可以在react中创建静态成员吗？