我正在尝试通过按钮的onClick属性呈现另一个类组件。但是，当我调用返回组件的函数时（LogicGate）。该函数被调用，但是没有明显返回任何内容。这种逻辑有根本上的错误吗？我是新来的反应。
下面是代码：
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>
);
}
}
@Kenny（多个组件问题）：
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>
);
}
}
答案 0 :(得分：0)
这是一个示例，尚未尝试运行它。
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>
);
}
}
答案 1 :(得分：0)
这是另一种方法：
class TabMenuButtons extends Component {
constructor(props) {
super(props);
this.state = {
loadComponent = false,
};
}
function loginGateHandler(){
this.setState({loadComponent : !loadComponent});
}
render() {
let componentPlaceHolder = null;
this.state.loadComponent ? componentPlaceHolder = <ComponentReturned/> : componentPlaceHolder = null;
return (
<div>
<center>
<table cellspacing="30px">
<tr>
<td>
<Button label="ITEM" icon="pi pi-home" className="TabMenuButtons" onClick={loginGateHandler} 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>
{componentPlaceHolder}
{/* 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>
);
}
}
我还没有运行这段代码，但是我很确定它已经准备就绪。确保将componentPlaceHolder放置在要在页面中呈现组件的位置。
React组件不返回，而只是根据您在代码中放入的逻辑进行渲染。您可以操纵状态变量来控制所有这些逻辑，而React将根据DOM中将要发生的变化为您完成其余工作。现在，如果您只想加载组件的内容，就好像它是一个“新页面”一样，请看一下响应路由，这确实很简单。同样，我建议您开始使用ES6功能，因为使用React和JavaScript可以使您的生活更轻松。这是一个很好的指南：https://medium.com/the-andela-way/a-beginners-guide-to-react-with-es6-a2ed0b5c977e
祝你好运！ ：）