Как заставить React ES6 статический метод «это» быть привязан к лексической области

-2

В React (используя ES6 через babel), я пытаюсь создать статический метод, который обновляет состояние компонента, в котором он содержится. в качестве аргумента. Проблема заключается в том, что «это» никогда не связано с лексической сферой.Как заставить React ES6 статический метод «это» быть привязан к лексической области

static updateList = (Item) => { 
    this.setState({ cartUpdated: Date.now() }); //setState is not available 
}

В другом компоненте ...

<div onClick={Cart.updateList.bind(this,this.props)}>Click</div>

Сначала я думал, что это может быть связано с «этим» прошел через «привязку», но я создал дубликат нестатический метод со стрелкой в компонент, содержащий обработчик кликов, и я мог бы получить доступ к лексическому «этому» просто отлично.

В отчаянии также пытался сделать статический клон setState, но не повезло.

Я предполагаю, что это структурное решение/решение безопасности (если мы пропустим "это" мы просачиваем все!), Но как обращаться с "этим"? Устанавливает ли это ограничение функцию updateList, чтобы сидеть над обновлением и Компонентом с помощью обработчика кликов? Это, конечно, может быть скорее реактивным, но мне любопытно.

источник

2015-09-28 Erik Elverskog

"* статический метод, который обновляет состояние компонента, содержащегося в *" - вы не имеете никакого смысла. Статические методы относятся к классу, нет состояния. Вам нужен метод экземпляра? Затем используйте один. – Bergi

Если вы можете предоставить рабочий пример метода, к которому можно получить доступ через экземпляр, когда указанный экземпляр не найден в дочерних или родительских компонентах вызывающего компонента, это было бы фантастическим. –

Что вы подразумеваете под "*, когда указанный экземпляр не найден *"? Я предполагаю, что это ваш экземпляр? – Bergi

Ключевое слово ES6 static применимо только к методам класса, а не к стандартным свойствам. Таким образом, присваивание, которое вы пытаетесь, не является синтаксически действительным. Можно было бы написать:

static updateList(Item) { 
    this.setState({ cartUpdated: Date.now() }); //setState is not available 
}

См документации MDN «s для более четкого объяснения.

источник

2015-09-28 14:59:31

Не является ли метод setState методом экземпляра? Даже если вы повторно привязываете статический метод к чему-то другому, он просто не должен быть статическим в первую очередь. – Bergi

Спасибо. Я пробовал его как с помощью функции стрелки, так и со стрелкой. Я считаю, что понимаю различие (=), но это не решает мою проблему. –

@ Берги, ты прав.Я просто думал исключительно в терминах ES6. –

class StaticClass extends React.Component{ 
 
    static updateList(item) { 
 
    this.setState({ 
 
     alert: Date.now() 
 
    }); 
 
    } 
 
} 
 

 
class Cpn extends React.Component{ 
 
    constructor() { 
 
    super(); 
 
    this.state = {}; 
 
    } 
 
    
 
    render() { 
 
    if (this.state.alert) { 
 
     alert(this.state.alert); 
 
    } 
 
    
 
    return (
 
     <div onClick={StaticClass.updateList.bind(this, this.props)}> 
 
     Click 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Cpn prop1="1" prop2="2"/>, 
 
    document.body 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Кажется, работает отлично. Ну, может быть, в 2015 году все изменилось? Или, может быть, я неправильно понимаю вопрос? Во всяком случае, мой тестовый код работает нормально.

источник

2017-04-11 09:58:19 BigName

Как заставить React ES6 статический метод «это» быть привязан к лексической области

ответ

Смежные вопросы