如何根据单击按钮时的下拉选项有条件地渲染组件.(反应)

Question

我正在尝试使用React文档中的元素变量：https://reactjs.org/docs/conditional-rendering.html.我不知道为什么它没有呈现我存储在Output变量中的组件。

提交：

import './Submit.css'
import React, { useEffect, useState } from "react";
import Output from '../Output/Output'
function Submit(props) {
let output;
const process = () => {
console.log(output)
if(props.src === "x" && props.tgt === "y") { 
output = <Output src={props.src} tgt={props.tgt}/>
}
}
return (
<>
<button 
disabled={props.src === "Source Chain" || props.tgt === "Target Chain"}
onClick={() => process()} className="submit">Submit
</button>
{output}
</>
);
};

export default Submit;

输出组件：

import './Output.css'
import React, { useEffect, useState } from "react";
function Output (props) {
return (
<div className="content">;
<a className="contenttitle">{props.src} to {props.tgt}</a>
<h3 className="contentboxtitle"></h3>
<div className ="liquidassets"> </div>
<h3 className="contentboxtitle"></h3>
<div className ="liquidassets"> </div>
</div>
)
}


export default Output;

谢谢你的帮助！！

Answer 1

使用状态控制按钮，并使用该状态渲染或不渲染输出组件

import React, { useState } from "react";
export default function SystemsButtonGroup() {
const [showOutput, setShowOutput] = useState(false);
return (
<div>
<button onClick={() => setShowOutput(!showOutput)} className="submit">
Submit
</button>
{showOutput && <div>Replace this with your output component</div>}
</div>
);
}