javascript - 动态显示依赖项

Question

我有一个包含父问题和从属问题的表单。 默认情况下需要隐藏相关问题。如果父问题的回答为"is"，则应显示从属问题。 从属问题包含父问题 ID。

对象结构如下。

{
  "module_question_id": "e04f487b-4782-11e8-a89b-408d5ce49fe0",
  "question": "Parent question",
  "question_type": "boolean",
  "is_required": 1,
  "dependant_answer_id": null,
  "parent_question_id": null,
  "answers": [
    {
      "module_answer_id": "ec52835f-4782-11e8-a89b-408d5ce49fe0",
      "answer": "Yes"
    },
    {
      "module_answer_id": "f26a2fa0-4782-11e8-a89b-408d5ce49fe0",
      "answer": "No"
    },
    {
      "module_answer_id": "521f5e95-534c-11e8-9c0a-408d5ce49fe0",
      "answer": "I don't know"
    }
  ]
},
{
  "module_question_id": "5a71221b-4795-11e8-a89b-408d5ce49fe0",
  "question": "Dependent question",
  "question_type": "boolean",
  "is_required": 0,
  "dependant_answer_id": "ec52835f-4782-11e8-a89b-408d5ce49fe0",
  "parent_question_id": "e04f487b-4782-11e8-a89b-408d5ce49fe0",
  "answers": [
    {
      "module_answer_id": "66d94086-4795-11e8-a89b-408d5ce49fe0",
      "answer": "Yes"
    },
    {
      "module_answer_id": "6a397737-4795-11e8-a89b-408d5ce49fe0",
      "answer": "No"
    },
    {
      "module_answer_id": "1667b12f-534d-11e8-9c0a-408d5ce49fe0",
      "answer": "I don't know"
    }
  ]
}

我隐藏了页面加载的相关问题，如下所示。

 <div className={this.getWrapperClass()}>
      ...
</div>
  getWrapperClass() {
    let wrapperClsName = this.props.questionInfo.parent_question_id == null ? `wrap-${this.props.questionInfo.question_type}` : `hide wrap-${this.props.questionInfo.question_type}`;
    return wrapperClsName;
  }

现在，当在父问题上选择"is"时，我需要显示从属问题。

知道如何实现这个吗？

Answer 1

在 React 中通常不会使用类来显示和隐藏。相反，您可以根据状态呈现或不呈现问题。

这是一个简单的示例，请参阅片段内的评论:

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    // Initial state: Not showing
    this.state = {
      showingQuestion: false
    };
    
    // Event handler for checkbox
    this.tickBox = event => {
      this.setState({
        showingQuestion: event.currentTarget.checked
      });
    };
  }
  
  render() {
    // Render our UI for whether to show the question, and render
    // the question *if* our state is that we're showing it
    return (
      <div>
        <label>
          Show the question
          <input type="checkbox" onClick={this.tickBox} />
        </label>
        {this.state.showingQuestion &&
          <div>
            This is the question
          </div>
        }
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是根据状态中的标志有条件地呈现问题的位:

{this.state.showingQuestion &&
  <div>
    This is the question
  </div>
}