propsが変更されたときにreactがコンポーネントを再レンダリングしない

Question

私のプロップのclass属性を変更していますが、コンポーネントを新しいクラスで再レンダリングしたいが、動作しません。私は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;