Reactjs 模态渲染和onClick-in-React

我是一个新的反应者，我很难通过按钮的

onClick

事件调用组件

下面给出的是代码段

function Dev({value}){
    return(
        <Card>
            <CardImg top width="100%" src={value.src} alt="Card image cap" />
            <CardBody>
                <CardTitle className='text-card'>{value.title}</CardTitle>
                <CardText className='text-text'>{value.text}</CardText>
                <Button className='text-button' onClick={(value)=>{
                    return(
                        <div>
                            {value.id ? <Login /> : <Sign />}
                        </div>
                    )
                }}>{value.button}<i class={value.icon} aria-hidden="true"></i></Button>
            </CardBody>
        </Card>
);
}

函数Dev（{value}）{
返回(
{value.title}
{value.text}
{
返回(
{value.id？：}
)
}}>{value.button}
);
}

value.id

为

true

或

false

，但无论哪种方式，

onClick

都不会触发

组件

Login

和

Sign

实际上是由模态组成的组件

---

非常感谢您的帮助。

要解决您的问题，您应该为您的组件添加状态，并在其中保留一些

IsButtonClick

：

function Dev({ value }) {
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  const handleClick = () => setIsButtonClicked(true);

  return (
    <Card>
      <CardImg top width="100%" src={value.src} alt="Card image cap" />
      <CardBody>
        <CardTitle className="text-card">{value.title}</CardTitle>
        <CardText className="text-text">{value.text}</CardText>
        <Button className="text-button" onClick={handleClick}>
          {value.button}
          <i class={value.icon} aria-hidden="true"></i>
        </Button>
        {isButtonClicked && (value.id ? <Login /> : <Sign />)}
      </CardBody>
    </Card>
  );
}

函数Dev（{value}）{
const[isButtonClicked，setIsButtonClicked]=useState（false）；
const handleClick=（）=>setIsButtonClicked（true）；
返回(
{value.title}
{value.text}
{value.button}
{isButtonClicked&&（value.id？：）}
);
}

从单击函数返回JSX没有任何意义。当用户单击按钮时，您希望发生什么？要在单击按钮时呈现登录/签名组件设置状态，请在设置状态时显示组件。在文档中查找状态和条件呈现。所以更新状态是呈现组件的唯一方法？状态是最好的方法，是的。从

onClick返回不起作用，如果起作用，将在哪里渲染？它会取代按钮吗？组件？是否在某个地方添加到现有JSX？基本上，没有从
onClick
返回JSX的逻辑方法（谢天谢地，它没有）。因此，在状态中设置一个标志并有条件地进行渲染是一种可行的方法。