Как метод может быть доступен внутри объекта через this, но не быть доступным извне по имени?

Question

[weredy]

У React есть метод setState() который можно использовать внутри объекта, который передаешь для создания экземпляра:

var MyComponent = React.createClass({
            getInitialState: function() {
                return {
                    myState: 1
                };
            },

            myMethod: function() {
              this.setState({
                    myState: 1
                })
            },

            render: function() {
                return (
                    <h1>Тест</h1>
                );
            }
        });

Но при вызове MyComponent.setState извне: Uncaught TypeError: MyComponent.setState is not a function(…)

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

Comments

[Михаил Плюснин]

Полагаю, что он может биндиться или вызываться на этапе выполнения, поэтому и не доступен.

Answer 1

[Aves]

MyComponent это функция-конструктор, setState в прототипе. Нужно создать инстанс компонента.

var instance = ReactDOM.render(<MyComponent />. document.body);
instance.setState({myState: 1});

(new MyComponent()).setState() тоже по идее будет работать.

Comments

[Alex Zeit]

извините - один вопрос... ЗАЧЕМ так?

[weredy]

Получается я в React создаю функцию конструктор описывая компонент а сам он создается когда я передаю этот конструктор методу render библиотеки ReactDOM?

[Alex Zeit]

weredy: https://facebook.github.io/react/docs/components-a... прочтите хотя бы это...

[Aves]

Alex Zeit: зачем что? Доступ к состоянию компонента извне может быть нужен, например, если на реакте написан отдельный виджет на странице. new MyComponent() - просто демонстрация того, чем является MyComponent.

[Alex Zeit]

Aves: извините - но я не понимаю) зачем вам получать состояние компонента если компонент рендерится на основе состояния?

[Aves]

weredy: да, в общем так и есть.

[Aves]

Alex Zeit: setState не получает состояние, а изменяет его. Например, на этом сайте можно сделать компонент комментариев, а на существующую кнопку "отправить" добавить обработчик типа comments.setState({...comments.state, textarea.value})

[Alex Zeit]

Aves: плохая идея коммуникации компонентов - если не использовать redux или что то подобное то одним из решений может стать https://maxfarseer.gitbooks.io/react-course-ru/con...

[Aves]

Alex Zeit: решение по ссылке довольно корявое. Redux очень далёк от серебряной пули. Получение инстанса и взаимодействие с ним - это нормально, когда сайт не является полностью приложением react.

[Alex Zeit]

Aves: возможно мы мыслим в разных понятиях "удобно".
если мне нужно менять в нескольких независимых частях приложения(сайта) ваш виджет, как мне обращатся к компоненту? решения типа EventEmitter как раз решают проблему если у вас сайт частично на реакте и вам нужно как то унифицировать взаимодействие с компонентами.
у вас же решение напоминает мне jQuery way.

[Aves]

Alex Zeit: Это и есть jQuery way. Когда существующий сайт на jQuery, то сделать обращение к инстансу компонента из обработчика jQuery - это одна строка. React именно тем и хорош, что позволяет это делать легко. А применение EventEmitter в случаях синхронных обработчиков - это антипаттерн и overengineering.

Вообще, не вижу смысла продолжать этот флейм и пытаться что-то объяснить тому, у кого нет никакого желания это понять.

Answer 2

[Сергей Семенко]

https://learn.javascript.ru/bind

Comments

[weredy]

Но ведь я просто вызываю метод объекта а он мне сразу говорит что этот метод никакая не функция. Я не совсем понимаю причём тут контекст.

[Сергей Семенко]

weredy: не знаком с React, но думаю здесь, как сказал Aves , используется "внедрение" методов в прототип объекта.

[Сергей Семенко]

weredy: так что контекст здесь не причём, я ошибся.

[Сергей Семенко]

weredy: Как я понял, всё магия происходит в этом методе: https://github.com/facebook/react/blob/c78464f8ea9...

Answer 3

[Alex Zeit]

я не совсем понимаю - зачем вам setState снаружи?
если вы хотите просто передать параметры - передайте их в таком виде

ReactDOM.render(<MyComponent myState='1' /> , document.body);
.... 
render: function() {
                return (
                    <h1>Тест { this.props.myState}</h1>
                );
            }

Comments

[Alex Zeit]

если я вас верно понял - у вас вопрос как извне изменять данные в уже созданном компоненте
вот хорошая книга на русском с примерами (тут конкретно ссылка на вашу проблему)
https://maxfarseer.gitbooks.io/react-course-ru/con...

[weredy]

Alex Zeit: Большое спасибо за ссылку и за ответ.