React：使用CSS类在数组中标记活动组件

Question

I am loading a series of sentences into an array Sentences in React. On my front end I have one "active" sentence and after user form input the next sentence in the loaded array should become "active" with a new CSS class attached to it.

How would I go about doing this? I understand SentenceList needs to keep track of the active_sentence and the Sentence needs to tell SentenceList has been updated, and when it does it should set the class "active" to the next sentence sequentially. But I'm not sure how to implement it.

SentenceList :

var SentenceList = React.createClass({
  render: function() {
    var sentences = [];
    active_sentence = 0;

    //loop through sentences and push each sentence into array
    this.props.sentences.forEach(function(sentence) {

      // increment an index variable here and put an if index === active_sentence statement?

      //grabs @sentences from Rails
      sentences.push(<Sentence key={sentence.id} details={sentence} />)
    });

    return (
      <div>{sentences}</div>
    )
  }
});

Sentence :

var Sentence = React.createClass({
  getInitialState: function() {
    return {
      //
    }
  },

  addBlip: function(e) {
    var blipBody = this.refs.newBlip.getDOMNode().value;
    var sentenceId = this.props.details.id;
    var thisSentenceComponent = this;

    $.ajax({
      url: '/sentences/' + sentenceId + '/blips',
      type: 'POST',
      dataType: 'json',
      data: {blip: {body: blipBody}}
    });

    e.preventDefault();
  },

  render: function() {
    //get user input and submit blip and make next sentence "active"
    var phrase = this.props.details.body;
    var phrase_display = phrase.split("*");

    return (
      <div className="blipForm">
        {phrase_display[0]}
        {this.props.details.index}
        <form onSubmit={this.addBlip}>
          <input
            type="text"
            ref="newBlip"
          />
        </form>
        {phrase_display[1]}
      </div>
    )
  }
});

Answer 1

You can create a variable in state ( activeKey in this example) to keep track of which sentence key is considered active, then a prop can be passed to Sentence telling it whether it is active. The function setActiveKey below can be used to update the active sentence when you load a new sentence :

var SentenceList = React.createClass({
  getInitialState: function() {
    return {
      activeKey: false
    };
  },
  setActiveKey(newActiveKey){
    this.setState({activeKey: newActiveKey}); 
  },
  render: function() { 
    var sentences = [];
    this.props.sentences.forEach(function(sentence) {
      sentences.push(<Sentence isActive={this.state.activeKey === sentence.id} key={sentence.id} details={sentence} />)
    }.bind(this));
    return (
      <div>{sentences}</div>
    )}
});

Then within the render function of Sentence , you can the prop isActive , and if the value is true, you can render it with the active style:

render: function() {  
  var phrase = this.props.details.body
  var phrase_display = phrase.split("*");

  return (
    <div className="blipForm" style={this.props.isActive ? styles.active : styles.inactive}>
      {phrase_display[0]}
      {this.props.details.index}
      <form onSubmit={this.addBlip}>
        <input type="text"
             ref="newBlip" />
      </form>
      {phrase_display[1]}
    </div>
  )
}

And you can control your styles in a variable ( styles here):

var styles={
  active:{
    //set active styles here
  },
  inactive:{
    //set inactive styles here
  }
};