父组件state 处理的问题,谢谢

#1

若是两次都是点击在子组件的同一个位置,也就是父的 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;



非常感谢

#2

父组件中定义一个参数包含 index 处理相关事件 的 回调函数
父组件 将index 以及 回调函数 通过props 传递到 子组件
子组件相关事件,执行回调函数并传index

#3

已经解决,谢谢