基于反应道具的渲染不起作用
React prop based rendering not working
所以我有这个组件
import React from 'react';
import ReactDOM from 'react-dom';
import NeoHeader from './header/NeoHeader';
import NeoLoginModal from './modal/NeoLoginModal';
class Neo extends React.Component {
constructor(props) {
super(props);
this.state = {loginModal: false};
}
render() {
return( <NeoHeader/> { this.state.loginModal ? <NeoLoginModal /> : null })
}
}
ReactDOM.render(
<Neo/>,
document.getElementById('react-wrapper')
);
如您所见,我试图在状态属性设置为 true 时显示组件 NeoLoginModal。但是,使用 Laravel mix 构建会在 {this..}
开始时出现意外的标记错误。这在多个地方被记录为执行此操作的正确方法,那么错误是什么?
问题不在 Laravel Mix 中,而是在您的组件 HTML 结构中。在 React
中,您不能将兄弟姐妹渲染为一级元素。为了使您的代码正常工作,您应该使用父标记包装两个子组件,例如:
render() {
return (
<div>
<NeoHeader />
{ this.state.loginModal ? <NeoLoginModal /> : null }
</div>
);
}
所以我有这个组件
import React from 'react';
import ReactDOM from 'react-dom';
import NeoHeader from './header/NeoHeader';
import NeoLoginModal from './modal/NeoLoginModal';
class Neo extends React.Component {
constructor(props) {
super(props);
this.state = {loginModal: false};
}
render() {
return( <NeoHeader/> { this.state.loginModal ? <NeoLoginModal /> : null })
}
}
ReactDOM.render(
<Neo/>,
document.getElementById('react-wrapper')
);
如您所见,我试图在状态属性设置为 true 时显示组件 NeoLoginModal。但是,使用 Laravel mix 构建会在 {this..}
开始时出现意外的标记错误。这在多个地方被记录为执行此操作的正确方法,那么错误是什么?
问题不在 Laravel Mix 中,而是在您的组件 HTML 结构中。在 React
中,您不能将兄弟姐妹渲染为一级元素。为了使您的代码正常工作,您应该使用父标记包装两个子组件,例如:
render() {
return (
<div>
<NeoHeader />
{ this.state.loginModal ? <NeoLoginModal /> : null }
</div>
);
}