Reactjs 如何返回和呈现组件onClick（）？
我试图通过按钮的onClick属性呈现另一个类组件。但是，当我调用返回组件的函数（LogicGate）时。函数被调用，但没有明显返回任何内容。这种逻辑是否存在根本性的错误。我是新来的 下面是代码：Reactjs 如何返回和呈现组件onClick（）？,reactjs,Reactjs,我试图通过按钮的onClick属性呈现另一个类组件。但是，当我调用返回组件的函数（LogicGate）时。函数被调用，但没有明显返回任何内容。这种逻辑是否存在根本性的错误。我是新来的 下面是代码： class TabMenuButtons extends Component { constructor(props) { super(props); this.state = { }; } render() {
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
function LogicGate (props) {
console.log("LogicGate was called")
return <ComponentReturned/>
}
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="ITEM" icon="pi pi-home" className="TabMenuButtons" onClick={accordionLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c" }}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-users" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-cloud" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-money-bill" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
</tr>
</table>
</center>
<tr>
{/* EDIT THIS to become dynamic */}
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$67,000.00 </em></h1> </td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$5,000.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$54,406.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>1,000</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>20.00%</em></h1></td>
</tr>
</div>
);
}
}
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
rendersummaryAccordions: false,
renderservicesAccordions: false,
rendertravelAccordions: false,
renderratesAccordions: false,
};
}
summaryAccordionsLogicGate = () => {
this.setState({rendersummaryAccordions: true});
console.log("summaryAccordionsLogicGate was called")
}
servicesAccordionsLogicGate = () => {
this.setState({renderservicesAccordions: true});
console.log("servicesAccordionsLogicGate was called")
}
ratesAccordionsLogicGate = () => {
this.setState({renderratesAccordions: true});
console.log("ratesAccordionsLogicGate was called")
}
travelAccordionsLogicGate = () => {
this.setState({rendertravelAccordions: true});
console.log("travelAccordionsLogicGate was called")
}
render() {
//The last ternary operator gets rendered for some reason, the rest will not be rendered onClick
let componentPlaceHolder = null;
this.state.rendersummaryAccordions ? componentPlaceHolder = <SummaryAccordions/> : componentPlaceHolder = null;
this.state.renderservicesAccordions ? componentPlaceHolder = <ServicesAccordions/> : componentPlaceHolder = null;
this.state.renderratesAccordions ? componentPlaceHolder = <RatesAccordions/> : componentPlaceHolder = null;
this.state.rendertravelAccordions ? componentPlaceHolder = <TravelAccordions/> : componentPlaceHolder = null;
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="SUMMARY" icon="pi pi-home" className="TabMenuButtons" onClick={this.summaryAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c" }}></Button>
</td>
<td>
<Button label="SERVICES" icon="pi pi-users" className="TabMenuButtons" onClick={this.servicesAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="T&L/OPE" icon="pi pi-cloud" className="TabMenuButtons" onClick={this.travelAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="RATES" icon="pi pi-money-bill" className="TabMenuButtons" onClick={this.ratesAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
</tr>
</table>
</center>
<tr>
{/* EDIT THIS to become dynamic */}
<td className="StaticTextBelowTabView"><h1> Item 0: <em>$67,000.00 </em></h1> </td>
<td className="StaticTextBelowTabView"><h1> Item 1: <em>$5,000.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> Item 2: <em>$54,406.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> Item 3: <em>1,000</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> Item 4: <em>20.00%</em></h1></td>
</tr>
{componentPlaceHolder}
</div>
);
}
}
类选项卡按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
功能逻辑门（props）{
log（“调用了LogicGate”）
返回
}
返回(
{/*将其编辑为动态*/}
静态文本：$67000.00
静态文本：$5000.00
静态文本：54406.00美元
文本：1000
静态文本：20.00%
);
}
}
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
function LogicGate (props) {
console.log("LogicGate was called")
return <ComponentReturned/>
}
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="ITEM" icon="pi pi-home" className="TabMenuButtons" onClick={accordionLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c" }}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-users" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-cloud" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-money-bill" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
</tr>
</table>
</center>
<tr>
{/* EDIT THIS to become dynamic */}
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$67,000.00 </em></h1> </td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$5,000.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$54,406.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>1,000</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>20.00%</em></h1></td>
</tr>
</div>
);
}
}
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
rendersummaryAccordions: false,
renderservicesAccordions: false,
rendertravelAccordions: false,
renderratesAccordions: false,
};
}
summaryAccordionsLogicGate = () => {
this.setState({rendersummaryAccordions: true});
console.log("summaryAccordionsLogicGate was called")
}
servicesAccordionsLogicGate = () => {
this.setState({renderservicesAccordions: true});
console.log("servicesAccordionsLogicGate was called")
}
ratesAccordionsLogicGate = () => {
this.setState({renderratesAccordions: true});
console.log("ratesAccordionsLogicGate was called")
}
travelAccordionsLogicGate = () => {
this.setState({rendertravelAccordions: true});
console.log("travelAccordionsLogicGate was called")
}
render() {
//The last ternary operator gets rendered for some reason, the rest will not be rendered onClick
let componentPlaceHolder = null;
this.state.rendersummaryAccordions ? componentPlaceHolder = <SummaryAccordions/> : componentPlaceHolder = null;
this.state.renderservicesAccordions ? componentPlaceHolder = <ServicesAccordions/> : componentPlaceHolder = null;
this.state.renderratesAccordions ? componentPlaceHolder = <RatesAccordions/> : componentPlaceHolder = null;
this.state.rendertravelAccordions ? componentPlaceHolder = <TravelAccordions/> : componentPlaceHolder = null;
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="SUMMARY" icon="pi pi-home" className="TabMenuButtons" onClick={this.summaryAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c" }}></Button>
</td>
<td>
<Button label="SERVICES" icon="pi pi-users" className="TabMenuButtons" onClick={this.servicesAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="T&L/OPE" icon="pi pi-cloud" className="TabMenuButtons" onClick={this.travelAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="RATES" icon="pi pi-money-bill" className="TabMenuButtons" onClick={this.ratesAccordionsLogicGate} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
</tr>
</table>
</center>
<tr>
{/* EDIT THIS to become dynamic */}
<td className="StaticTextBelowTabView"><h1> Item 0: <em>$67,000.00 </em></h1> </td>
<td className="StaticTextBelowTabView"><h1> Item 1: <em>$5,000.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> Item 2: <em>$54,406.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> Item 3: <em>1,000</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> Item 4: <em>20.00%</em></h1></td>
</tr>
{componentPlaceHolder}
</div>
);
}
}
类选项卡按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
RenderSummary手风琴：false，
RenderService记录：false，
RenderTravelaccordins:false，
渲染效果：错误，
};
}
summaryAccordionsLogicGate=（）=>{
this.setState（{rendersummaryAccordions:true}）；
log（“调用了SummaryAccordionLogicGate”）
}
服务协调逻辑门=（）=>{
this.setState（{renderservicesaccordins:true}）；
log（“调用了ServicesAccordionLogicGate”）
}
速率协调逻辑门=（）=>{
this.setState（{renderRateAccordions:true}）；
log（“调用RatesAccordionLogicGate”）
}
TravelAccordionLogicGate=（）=>{
this.setState（{rendertravelaccordins:true}）；
log（“调用TravelAccordionLogicGate”）
}
render（）{
//最后一个三元运算符由于某种原因被渲染，其余的将不会在单击时渲染
让componentPlaceHolder=null；
this.state.rendersummaryAccordions？componentPlaceHolder=：componentPlaceHolder=null；
this.state.renderservicesAccordions？componentPlaceHolder=：componentPlaceHolder=null；
this.state.renderRateAccordions？componentPlaceHolder=：componentPlaceHolder=null；
this.state.renderTravelaccordins？componentPlaceHolder=：componentPlaceHolder=null；
返回(
{/*将其编辑为动态*/}
项目0:$67000.00
项目1:5000.00美元
项目2:54406.00美元
项目3:1000
项目4:20.00%
{组件占位符}
);
}
}
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
logicComponent: false,
};
}
render() {
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="ITEM" icon="pi pi-home" className="TabMenuButtons" onClick={() => this.setState(logicComponent: !this.state.logicComponent)} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c" }}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-users" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-cloud" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-money-bill" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
</tr>
</table>
</center>
<tr>
{this.state.logicComponent ? <ComponentReturned/>:null}
{/* EDIT THIS to become dynamic */}
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$67,000.00 </em></h1> </td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$5,000.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$54,406.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>1,000</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>20.00%</em></h1></td>
</tr>
</div>
);
}
}
类选项卡按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
逻辑组件：false，
};
}
render（）{
返回(
this.setState（logicComponent:！this.state.logicComponent）}样式={{{marginRight:'.25em'，borderRadius:'8%'，背景色：“#1c479c”}>
{this.state.logicComponent？：null}
{/*将其编辑为动态*/}
静态文本：$67000.00
静态文本：$5000.00
静态文本：54406.00美元
文本：1000
静态文本：20.00%
);
}
}
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
logicComponent: false,
};
}
render() {
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="ITEM" icon="pi pi-home" className="TabMenuButtons" onClick={() => this.setState(logicComponent: !this.state.logicComponent)} style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c" }}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-users" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-cloud" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
<td>
<Button label="ITEM" icon="pi pi-money-bill" className="TabMenuButtons" style={{marginRight:'.25em', borderRadius: '8%', backgroundColor: "#1c479c"}}></Button>
</td>
</tr>
</table>
</center>
<tr>
{this.state.logicComponent ? <ComponentReturned/>:null}
{/* EDIT THIS to become dynamic */}
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$67,000.00 </em></h1> </td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$5,000.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>$54,406.00</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>1,000</em> </h1></td>
<td className="StaticTextBelowTabView"><h1> STATICTEXT: <em>20.00%</em></h1></td>
</tr>
</div>
);
}
}
类选项卡按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
逻辑组件：false，
};
}
render（）{
返回(
this.setState（logicComponent:！this.state.logicComponent）}样式={{{marginRight:'.25em'，borderRadius:'8%'，背景色：“#1c479c”}>