道具變化時反應不會重新渲染組件

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;