道具变化时反应不会重新渲染组件
我正在更改道具的类属性,然后我希望组件使用新类重新渲染但不起作用。我已阅读有关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不同的事情,但似乎有别的东西我失踪。
您不能直接更改道具,要么调用父级函数来更改传递到组件的道具,要么在您创建的本地副本中更改它们。 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;
当你写这个:[... this.state.options]是什么意思? –
如果我使用this.state.options则状态将为空。我可以使用this.setState.options,但这是错误的,因为这是用来实际设置状态的方法吗? –
看到这个答案http://*.com/questions/42811882/what-is-the-meaning-of-this-syntax-x-in-reactjs/42811937#42811937了解什么'[... this.state .options]意思是,它创建了一个重复的对象并且简短地包装在一个数组中,即使构造函数被第一次调用并设置了状态,也被称为扩展运算符语法 –
触发时才会调用我读了一篇博客“只有组件的状态发生了变化才能触发重新呈现,状态可以从道具更改或直接setState更改中更改,组件获取更新的状态,React决定是否应该重新渲染,渲染组件“。道具和状态都会触发状态变化 –