在 React 中只渲染下一个未填写的表单组件

Question

我很难处理复杂的表格。大约有 400 个问题，其中大部分是单选题。我认为这是使用 useMemo、createRef、useRef 或其他东西的地方，这样只有第一个空白组件才能获得显示样式的 true 结果。

请帮帮我

这是与来源的基本相似

const SeveralForms = () => {
  return(
    // hope pseudo code is ok
    // like 10 of these
    <Form>
  )
}

const Form = () => {
  return(
    // about 30 of these
    <RadioGroup>
  )
}

const RadioGroup = () => {

  const show = () => (pesky logic i cant pin down)

  return(
    <div style={{display: show() ? 'block' : 'none' }}>
      <RadioButton />
      <RadioButton />
      <RadioButton />
    </div>
  )
}

Answer 1

为什么不简单：

const RadioGroup = () => {
  const [isAnswered, setIsAnswered] = useState(false);

  const onClick = () => {
     // check if either of your radio buttons are checked
     // and set the state accordingly
     setIsAnswered(true /*or false*/)
  }

  return(
    <div style={{display: isAnswered ? 'none' : 'block' }} onClick={onClick}>
      <RadioButton />
      <RadioButton />
      <RadioButton />
    </div>
  )
}

在 React 中只渲染下一个未填写的表单组件

Render only the next unfilled form component in React

reactjs

react-hooks