我无法通过单击按钮来渲染组件[重复]答案

【问题标题】：I am unable render component with click a button [duplicate]我无法通过单击按钮来渲染组件[重复]
【发布时间】：2021-09-16 14:01:23
【问题描述】：

当点击一个按钮时，它应该渲染一个元素，但它不起作用。如果我点击，什么都不会发生，也不会触发任何错误。我正在使用材质 UI

组件内容是一个表单

function handleBoxRegister(){
    return (
      <div>test</div>
    )
  }

<Button
          variant="contained"
          color="primary"
          className={classes.buttonRegister}
          onClick={handleBoxRegister}
        >
          <AddIcon>
          </AddIcon>
          Registrar paciente
        </Button>

【问题讨论】：

这行不通。您不能 return 函数中的组件并期望将其添加到渲染树中。
请告诉我更多关于您要做什么的信息，您是否要在提交表单后显示组件？如果您添加更多信息，我可以为您提供更好的答案。
它在屏幕中间有一个div和一个带有几个按钮的侧边栏，其中一个是注册。然后当用户点击它时，屏幕中间应该会出现一个表单
是的，但我不是很了解，现在完全有道理了，非常感谢

标签： reactjs

【解决方案1】：

它在屏幕中间有一个 div 和一个带有几个按钮的侧边栏，其中一个是注册。然后当用户点击它时，屏幕中间应该会出现一个表单。

这是状态出现的地方，要使表单从视图中出现/消失，您应该可以将数据（状态）存储在 boolean 变量中，然后检查它是 true 还是 false 然后在render 根据变量的值显示或隐藏。

下面我们使用&&操作符，只有当第一个值为true时才会渲染它之后的组件。

例如：


function exmapleView (props) {
  const [isRegisterShown, setIsRegisterShown] = useState(false);
  return (
    <div>
      <Sidebar>
        <Button
          variant="contained"
          color="primary"
          className={classes.buttonRegister}
          onClick={() => setIsRegisterShown(true)}>
      </Sidebar>
      {isRegisterShown && <div>// Add the Register Form</div>}
      // Add Other Components here
    </div>
)
}

【讨论】：

成功了，非常感谢
考虑将其标记为已接受的答案并进行投票。所以我们可以在 StackOverflow 上帮助其他人解决同样的问题