[英]React Conditional Rendering of Component Inside Function Not Working
我正在使用 Codesandbox 学习 React。 我正在尝试有条件地在函数内部(在基于类的组件内部)呈现一个功能性 React 组件,该组件在单击按钮时触发。
这里是 Codesandbox 的链接: https ://codesandbox.io/embed/laughing-butterfly-mtjrq ? fontsize =14& hidenavigation =1& theme = dark
我遇到的问题是,如果没有在 App.js 中导入和呈现 Error 和 Meals,我永远无法从 Booking 组件中获取要呈现的任何一个组件。 在此处的函数中:
if (!this.state.name) {
return (
<div>
<Error />
</div>
);
}
else {
return <Meals name={this.state.name} date={this.state.date} />;
}
}
我应该渲染错误,如果没有输入名称但没有任何反应并且我被难住了,它应该会在点击时显示在屏幕上。
有什么明显的东西会阻止我看到错误组件在点击时加载吗?
先感谢您!
屏幕上显示的所有内容都来自render
方法。 你不能从任何类似的函数中返回JSX
。 你可以这样做:
class Bookings extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
date: "",
display: false
};
}
guestInfoHandler = event => {
console.log(this.state, "what is the state");
this.setState({ name: event.target.value });
};
dateInfoHandler = event => {
this.setState({ date: event.target.value });
};
showMeals = () => {
this.setState({ display: true });
};
render() {
return (
<>
<div style={{ display: "inline-block" }}>
<form
className="theForm"
style={{
height: "50px",
width: "100px",
borderColor: "black",
borderWidth: "1px"
}}
>
<label className="theLabel">
Name:
<input
className="theInput"
type="text"
placeholder="guest name here"
onChange={this.guestInfoHandler}
value={this.state.value}
/>
</label>
</form>
<form>
<label>
Date:
<input
type="text"
placeholder="date here"
onChange={this.dateInfoHandler}
value={this.state.value}
/>
</label>
</form>
<button onClick={() => this.showMeals()}>Click</button>
</div>
{ display && name ? (
<Meals name={name} date={name} />
) : (
<Error />
)}
</>
);
}
}
export default Bookings;
希望这对你有用。
render() {
const name = this.state.name;
return (
<div>
{name ? (
<Meals name={name} date={name} />
) : (
<Error />
)}
</div>
);
}
nb:仅在类组件中使用渲染方法。
中提到了各种类型的条件渲染
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.