ReactJS: Как я могу получить владельца компонента?

Question

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

Я хочу, чтобы компонент, как этот

var App = React.createClass({ 

    getInitialState: function(){ 
     return { 
      user: { 
       name: '' 
      } 
     } 
    }, 

    render: function(){ 

     return <TwoWayBinder type="input" model="user.name" />; 

    } 

}); 

где user.name переменная в this.state. Итак, я хочу, чтобы компонент <TwoWayBinder /> получил доступ к состоянию его родительского компонента (который является анти-шаблоном в соответствии с философией React). Я вижу, что родительский компонент доступен в свойстве _owner компонента TwoWayBinder.

Это единственный способ получить доступ к владельцу? Я не хочу использовать valueLink по нескольким причинам.

Answer 1

Нет документально подтвержденного доступа для доступа к владельцу. _owner - единственный недокументированный способ (насколько я знаю).

Update: "component._owner больше не доступен в 0,13" -zbyte

---

Я не поклонник Valuelink лично. Я работал над подобной, но более мощной системой.

В самом низком уровне формируют код выглядит следующим образом: jsbin 1

var App = React.createClass({ 
    mixins: [formMixin], 
    getInitialState: function(){ 
    return { 
     data: { name: "", email: "" } 
    } 
    }, 
    render: function(){ 
    var formData = this.stateKey("data"); 
    return (
     <div> 
     <input type="text" value={this.state.data.name} onChange={formData.forKey("name").handler()} /> 
     <input type="text" value={this.state.data.email} onChange={formData.forKey("email").handler() } /> 
     </div> 
    ); 
    } 
}); 

Это не плохо, и дает вам много контроля, но вы можете что-то еще быстрее. jsbin 2

var Input = React.createClass({ 
    render: function(){ 
    var link = this.props.link; 
    return <input type="text" 
        {...this.props} 
        value={link.getCurrentValue()} 
        onChange={link.handler()} /> 
    } 
}); 

var App = React.createClass({ 
    mixins: [formMixin], 
    getInitialState: function(){ 
     return { data: { name: "", email: "" } } 
    } 
    }, 
    render: function(){ 
    var formData = this.stateKey("data"); 
    return (
     <div> 
     <Input link={formData.forKey("name")} /> 
     <Input link={formData.forKey("email")} /> 
     </div> 
    ); 
    } 
}); 

Для полноты, вот полный Mixin:

var formMixinHandler=function(thisArg,keys,parent){return{forKey:function(key){return formMixinHandler(thisArg,keys.concat(key),this)},bindTo:function(newThisArg){return formMixinHandler(newThisArg,keys,this)},transform:function(fn){var obj=formMixinHandler(thisArg,keys,this);obj.transforms=obj.transforms.concat(fn);return obj},transforms:parent?parent.transforms:[],handler:function(){var self=this;return function(event){var value=event;if(event.target instanceof HTMLInputElement)if(event.target.type==="checkbox"||event.target.type==="radio")value=event.target.checked;else value=event.target.value;self.transforms.reduce(function(last,fn){return fn(last,event)},value);var targetObj=keys.slice(0,-1).reduce(function(obj,key){if(!obj[key])obj[key]={};return obj[key]},thisArg.state);targetObj[keys[keys.length-1]]=value;var updateObject={};updateObject[keys[0]]=thisArg.state[keys[0]];thisArg.setState(updateObject)}},getCurrentValue:function(){return keys.reduce(function(obj,key){return obj?obj[key]:null},thisArg.state)}}};var formMixin={stateKey:function(key){return formMixinHandler(this,[].concat(key))}}; 

Answer 2

Просто на вопрос, действительно, есть внутренний API, чтобы получить владельца в версии 0.13:

this._reactInternalInstance._currentElement._owner._instance 

Как вам знаете, это действительно не рекомендуется.