reagieren nicht Komponente nicht rerender wenn Requisiten

Question

änderte ich das Klassenattribut meiner Requisiten bin zu ändern und dann möchte ich die Komponente mit den neuen Klassen rerender aber das funktioniert nicht. Ich habe über die Methode sentComponentUpdate gelesen, aber diese Methode wird nie aufgerufen.

var ReactDOM = require('react-dom'); 
    var React = require('react'); 

    class Button extends React.Component { 
constructor(props) { 
    super(props); 
    console.log("BUTTON") 
    console.log(props); 
    var options = props.options; 
} 
componentWillMount() { 
    var defaultFeatureOptionId = this.props.feature.DefaultFeatureOptionId; 
    this.props.options.forEach((option) => { 
     var classes = ""; 
     if (option.Description.length > 10) { 
      classes = "option-button big-button hidden"; 
     } else { 
      classes = "option-button small-button hidden"; 
     } 
     if (option.Id === defaultFeatureOptionId) { 
      classes = classes.replace("hidden", " selected"); 
      option.selected = true; 
     } 
     option.class = classes; 
    }); 
} 
shouldComponentUpdate(props) { 
    console.log("UPDATE"); 
} 
toggleDropdown(option, options) { 
    console.log(option); 
    console.log(options) 

    option.selected = !option.selected; 
    options.forEach((opt) => { 
     if (option.Id !== opt.Id) { 
      opt.class = opt.class.replace("hidden", ""); 
     } 
     else if(option.Id === opt.Id && option.selected) { 
      opt.class = opt.class.replace("", "selected"); 
     } 
    });   
} 
render() { 
    if (this.props.options) { 
     return (<div> { 
      this.props.options.map((option) => { 
       return <div className={ option.class } key={option.Id}> 
        <div> {option.Description}</div> 
        <img className="option-image" src={option.ImageUrl}></img> 
        <i className="fa fa-chevron-down" aria-hidden="true" onClick={() => this.toggleDropdown(option, this.props.options) }></i> 
        </div> 
      }) 
     } 

     </div> 
     ) 
    }  
    else { 
     return <div>No options defined</div> 
    } 
} 
} 

module.exports = Button; 

Ich habe viele andere Sache über shouldComponentUpdate und componentWillReceiveProps lesen, aber es scheint, etwas anderes zu sein, ich bin fehlt.

Answer 1

Sie können nicht die Requisiten direkt ändern, entweder Sie eine übergeordnete Funktion aufrufen, die Requisiten zu ändern, die auf Ihrem Gerät oder in Ihrer lokalen Kopie übergeben werden, die Sie Createm Sie können sie ändern. shouldComponentUpdate wird nur aufgerufen, wenn ein Zustand, entweder direkt oder von den Requisiten verändert hat, werden Sie irgendetwas davon nicht tun, nur die lokale Kopie zu modifizieren und somit wird keine Änderung

Sie so etwas wie

var ReactDOM = require('react-dom'); 
var React = require('react'); 

    class Button extends React.Component { 
constructor(props) { 
    super(props); 
    console.log(props); 
    this.state = {options = props.options}; 
} 
componentWillRecieveProps(nextProps) { 
    if(nextProps.options !== this.props.options) { 
    this.setState({options: nextProps.options}) 
    } 
} 
componentWillMount() { 
    var defaultFeatureOptionId = this.props.feature.DefaultFeatureOptionId; 
    var options = [...this.state.options] 
    options.forEach((option) => { 
     var classes = ""; 
     if (option.Description.length > 10) { 
      classes = "option-button big-button hidden"; 
     } else { 
      classes = "option-button small-button hidden"; 
     } 
     if (option.Id === defaultFeatureOptionId) { 
      classes = classes.replace("hidden", " selected"); 
      option.selected = true; 
     } 
     option.class = classes; 
    }); 
    this.setState({options}) 
} 
shouldComponentUpdate(props) { 
    console.log("UPDATE"); 
} 
toggleDropdown(index) { 

    var options = [...this.state.options]; 
    var options = options[index]; 
    option.selected = !option.selected; 
    options.forEach((opt) => { 
     if (option.Id !== opt.Id) { 
      opt.class = opt.class.replace("hidden", ""); 
     } 
     else if(option.Id === opt.Id && option.selected) { 
      opt.class = opt.class.replace("", "selected"); 
     } 
    }); 
    this.setState({options}) 
} 
render() { 
    if (this.state.options) { 
     return (<div> { 
      this.state.options.map((option, index) => { 
       return <div className={ option.class } key={option.Id}> 
        <div> {option.Description}</div> 
        <img className="option-image" src={option.ImageUrl}></img> 
        <i className="fa fa-chevron-down" aria-hidden="true" onClick={() => this.toggleDropdown(index) }></i> 
        </div> 
      }) 
     } 

     </div> 
     ) 
    }  
    else { 
     return <div>No options defined</div> 
    } 
} 
} 

module.exports = Button;