2016-06-10 4 views
0

Я пытаюсь передать встроенную функцию реакции через реквизит и пытаюсь установить состояние, но я получаю this как неопределенный!Реакция вложенного компонента с помощью встроенной функции (без потока)

я пытался что-то вроде этого:

index.js

let somefun = function(){ 
    this.setState({myvar:1}); 
} 

ReactDom.render(<someComponent body={<someOtherComponent1 componentWillUpdate={somefun}/>} />, document.getElementById('someValidID')); 

someOtherComponent1.js

React.createElement(someOtherComponent1, { "className": "someclass"}) 

Моя проблема, когда я прохожу встроенную функцию ИЭ , функции, присутствующие в прототипе реакции this, всегда не определены.

Как я могу отправлять встроенные функции через реквизиты?

ответ

1

Очень распространенная проблема с знакомством с this и передачей функций вокруг.

Т.Л., др, чтобы вызвать setState на this, this должна быть вызвана внутри компонента, состояние которого должно быть обновлено. Вы вызываете его вне компонента.

someFun - это новая функция, которая вызывает функцию this внутри нее. Проблема в том, что в этом контексте является ссылкой на someFun, а не на ваш экземпляр компонента. Идите вперед и поместите там console.log(this).

Я думаю, что в вашем сценарии onComponentWillUpdate должна быть функцией внутри вашего компонента, а не объявлена ​​вне его.

render: function() { 
    return (
    <someOtherComponent1 onComponentWillUpdate={function(nextProps, nextState) { 
     // do something here 
     }} 
    /> 
) 

Но не забывайте, что вы должны называть эту функцию в своем дочернем компоненте.

// in someOtherComponent1 
componentWillUpdate: function(nextProps, nextState) { 
    // do something 
    this.props.onComponentWillUpdate(nextProps, nextState) 
} 
+0

спасибо за ответ ... но я пытаюсь работать некоторые абстракции здесь .. Я не хочу, чтобы установить sumeFunc внутри компонент ... причина в том, что этот компонент является многоразовым компонентом, и единственное, что является динамическим для этого компонента, - это 'componentWillUpdate' func, поэтому я искал способ указать его извне компонента (передать его из родительский компонент или что-то подобное) habe у вас есть идеи о том, как это сделать? –

+0

Было бы так. Пока ваш компонент всегда вызывает переданную функцию (вы могли бы даже назвать ее onComponentWillMount, чтобы сделать ее более понятной), она будет работать. То, что вам нужно, - это методология микширования более старого React, но они больше поддерживаются. Имейте в виду, что вы можете определить onComponentWillMount на лету. См. Обновленный ответ. –

0
ReactDom.render(<someComponent body={<someOtherComponent1 yourFn={somefun}/>} />, document.getElementById('someValidID')); 

и внутри компонента

this.props.yourFn() 
+0

Это не сработает, потому что проблема заключается в том, что 'someFun' не имеет правильного указателя на' this', поэтому переименование и вызов его в дочернем компоненте будет делать то же самое. Он должен быть определен внутри экземпляра компонента, так что 'this' указывает на компонент. В настоящее время он объявляется вне компонента. –

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