道具变化时反应不会重新渲染组件

Question

我正在更改道具的类属性，然后我希望组件使用新类重新渲染但不起作用。我已阅读有关shouldComponentUpdate方法，但该方法永远不会被调用。

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; 

我已经阅读了很多关于shouldComponentUpdate和componentWillReceiveProps不同的事情，但似乎有别的东西我失踪。

Answer 1

您不能直接更改道具，要么调用父级函数来更改传递到组件的道具，要么在您创建的本地副本中更改它们。 shouldComponentUpdate时的状态已经改变直接或道具，你没有做任何的是，仅修改本地副本，因此没有变化做根据

像

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;