若是两次都是点击在子组件的同一个位置,也就是父的 state 都是一样的…我想重置为空字符串…这样就隐藏内容了
import React, { Component } from 'react';
import './feedback.scss';
import service from '../../api';
const EmptyListDom = prop => {
return (
<p>{prop.questionList && prop.questionList === 0 ? '暂无相关问题!' : ''}</p>
);
};
const ListDom = prop => {
return (
<ul className="question-list">
{prop.questionList &&
prop.questionList.map((item, index) => {
const iconClass =
prop.currentIndex === index
? 'gmdoc-jiantouxia'
: 'gmdoc-jiantouyou';
return (
<li key={index} onClick={() => prop.changeIndex(index)}>
<div className="title">
{item.title}
<i
className={'gmicon collapse-icon '.concat(' ' + iconClass)}
/>
</div>
{prop.currentIndex === index && (
<div
className="content"
dangerouslySetInnerHTML={{
__html: item.content
}}
/>
)}
</li>
);
})}
</ul>
);
};
class FeedBack extends Component {
constructor() {
super();
this.state = {
questionList: [], // 问题列表
currentIndex: '' // 当前索引
};
this.getQuestionList(); // 获取问题列表
}
getQuestionList = () => {
service
.get('/help/top_questions')
.then(res => {
let questionList = res.data.data;
this.setState({
questionList
});
})
.catch(err => {
console.log(err);
});
};
updateCurrentIndex = id => {
this.setState({
currentIndex: id
});
};
static getDerivedStateFromProps(nextProps, prevState) {
console.log(nextProps)
// if (this.state.currentIndex === prevState.currentIndex) {
// return {
// currentIndex:''
// }
// }
return null;
}
shouldComponentUpdate = (nextProps, nextState) => {
// console.log('nextS:',nextState)
return true;
};
componentDidUpdate = (prevProps, prevState) => {
// console.log('prev',prevState)
// if(prevState.currentIndex )
};
render() {
const { questionList } = this.state;
return (
<div className="page">
<div className="question-area">
<div className="question-point">
<i className="sx-mobile sx-mobile-liebiao" />
<span>热点问题</span>
</div>
{questionList && questionList.length === 0 ? (
<EmptyListDom questionList />
) : (
<ListDom {...this.state} changeIndex={this.updateCurrentIndex} />
)}
</div>
<div className="feedback-area">
<a href="javascript:;" className="feedback-btn">
<span className="gmicon gmdoc-yijianfankui">意见反馈</span>
</a>
</div>
</div>
);
}
}
export default FeedBack;
非常感谢