2015-02-07 4 views
2

Не уверен, правильно ли я это понимаю. Если я создаю дочерний компонент, наберите кнопку, которая увеличивает свой собственный счетчик, возможно ли это сделать, не имея двух отдельных функций? следующее, что я сделал, похоже на взлом? что, если theres X количество кнопок, как бы я реорганизовал этот код более динамичным? REF, похоже, работает так, как я могу ссылаться на html на ребенка, но как насчет другого пути? Я даже думаю об этом правильно, потому что компонент имеет собственное состояние, должен ли он иметь свой собственный метод обновления?React - Состояние обновления для каждого дочернего компонента

/*** @jsx React.DOM */ 
 
var MyComponent = React.createClass({ 
 
    getInitialState: function() { 
 
    return { 
 
     counter1: 1, 
 
     counter2: 1 
 
    }; 
 
    }, 
 
    increment: function(i) { 
 
    if (i === 1) { 
 
     this.setState({ 
 
     counter1: this.state.counter1 + 1 
 
     }); 
 
    } else { 
 
     this.setState({ 
 
     counter2: this.state.counter2 + 1 
 
     }); 
 
    } 
 
    }, 
 
    render: function() { 
 
    return (<div> 
 
     <ChildComponent item = {this.state.counter1} click={this.increment.bind(this, 1)}/> 
 
     <ChildComponent item={this.state.counter2} click={this.increment.bind(this, 2)}/ > 
 
     < /div> 
 
     ); 
 
    } 
 
    }); 
 

 

 
    var ChildComponent = React.createClass({ 
 
    render: function() { 
 
     return (
 
      <div> 
 
      <h1> Counter {this.props.item} </h1 > 
 
      <button onClick = {this.props.click} > ++ < /button> 
 
      </div > 
 
    ); 
 
    } 
 
}); 
 

 

 
React.render(< MyComponent/> , document.body);

+0

Прошу прощения, вопрос мне непонятен. Каковы имена двух отдельных функций, о которых вы говорите? – nilgun

+0

Если каждый ребенок имеет функцию приращения i.e increment1 и increment2, я думаю, что я решил это неправильно. Я думаю, что каждый ChildComponent должен иметь собственную функцию увеличения. Решение = https://gist.github.com/antigirl/90f46aa7f51ba05f676a ? –

ответ

0

Я вижу в своем комментарии, что вы остановились на ввод состояния в компоненте ребенка. Хотя это прекрасно работает, сила Реагента заключается в том, что вы рассуждаете о состоянии на уровне, который имеет смысл для всех взаимодействий в приложении. Вполне разумно удерживать состояние обоих счетчиков в родительском. Я думаю, что типичная реализация будет иметь единственную функцию обновления в родительском, передать ее, текущее значение счетчика и идентификаторы счетчика вниз как реквизиты, а также иметь функцию обновления в child, предназначенную для вызова функции обновления родителя с соответствующим идентификатором счетчика ,

Update: Ваша сущность реализации этого шаблона близка к тому, что я говорил о том, сохраняя состояние в родителе и создание обработчика OnClick у ребенка, что в свою очередь вызывает функцию обновления своего родителя, передавая параметры, которые пусть родитель знает, какой счетчик обновления. Вы можете найти более полезным просто передать «refz» prop в качестве этого параметра, а не передавать во всей дочерней компоненте React, но, как доказательство концепции, у вас есть идея.

+0

Я не понимаю аргументацию функции обновления в дочернем компоненте? можете ли вы сделать какой-нибудь псевдокод? –

+0

это похоже на работу, я очистил HTML-бит https://gist.github.com/antigirl/a44c12f6a0084db7819a –

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