Мы можем создать статический член в реагировать?
В Java у нас есть статические члены, которые являются одинаковой копией для всех экземпляров, есть ли способы активировать то же самое в реагировать,
Я уже решил проблему с использованием RedEx., но я с нетерпением жду, чтобы решить эту проблему с помощью статических членов
в Яве
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);
}
}
Теперь я хочу сделать то же самое в реакции, есть ли способ получить доступ к члену класса в нескольких случаях.
в реагировать на данный момент я только могу получить доступ к начальным значениям
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}
3 ответа
Javascript (который реагирует на основе) не является действительно ООП, как Java, это язык, основанный на типе прототипа, так что нет прямого эквивалента для класса и статических переменных.
В ответ на эти глобальные вещи мы использовали бы 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
Одним из подходов является присвоение переменной классу, чтобы каждый экземпляр класса включал переменную. Это значение не будет полностью статичным, так как его можно переназначить через 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>
}
}
Кроме того, предположим, что статическое значение может измениться, и вы хотите, чтобы все компоненты могли считывать обновленное значение (без избыточности), а затем вы можете заключить его в объект.
В качестве альтернативы вы можете сделать это методом, который возвращает константу, в этом случае 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
не будет запускать компоненты для обновления, так как не произошло никаких изменений свойств или состояний.
Если вы хотите, чтобы компоненты получали обновления об изменениях свойств, в этот момент вы повторно внедряете Redux, и я бы порекомендовал вам использовать Redux. Вам необходимо подписать каждый компонент, чтобы отслеживать изменения в определенном разделе состояния, и вы можете увидеть, как этого добиться, посмотрев исходный код Redux: https://github.com/reduxjs/redux/blob/master/src/createStore.js
Перейдите по ссылке 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);