我正在使用React JSX。我有一个div,其中className =" shadow"如下图所示。
<div className="main">
<div className="shadow" style={{backgroundColor: "#FFFFFF"}}>
<div id="wrapper">
Hello
</div>
</div>
</div>
基于某个条件为true或false,我想删除带有className =&#34; shadow&#34;的div,但是想要保留每个div,包括id为id =&#34; div的&#34; ;完整。类似于jQuery的unwrap()方法。 下面写的内容的效果,但没有那么多行代码。
if ( currentPage==="login") {
<div className="main">
<div id="wrapper">
Hello
</div>
</div>
}
else {
<div className="main">
<div className="shadow" style={{backgroundColor: "#FFFFFF"}}>
<div id="wrapper">
Hello
</div>
</div>
</div>
}
我查看了React.js: Wrapping one component into another和How to pass in a react component into another react component to transclude the first component's content?,但没有得到我想要的内容。
答案 0 :(得分:0)
也许对您有帮助的是根据您所在的页面更改className
,因为您尝试使用react-router
根据您的路径显示不同的组件会更好上。
使用与此代码类似的内容,希望我能帮到你。
const App = React.createClass({
changePage(nextPage) {
this.setState({ page: nextPage })
},
getInitialState() {
return({
page: 'Login'
})
},
render() {
return(
<div className="main">
<div className={ this.state.page === 'Login' ? 'shadow' : '' }>
<div id="wrapper">
Hello from { this.state.page } page.
</div>
<button onClick={ this.changePage.bind(null, 'Login') }>Go to Login page.</button>
<button onClick={ this.changePage.bind(null, 'Home') }>Go to Home page.</button>
</div>
</div>
)
}
})
ReactDOM.render(<App />, document.getElementById('app'))
div.shadow{ background-color: #000000; color: #ffffff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>
答案 1 :(得分:0)
这是Higher Order Components的一个很好的用例!
const HOC = (currentPage, Shadow, Wrapper) => (
() => <div className="main">
{
currentPage === 'login'
? <Shadow {...this.props} />
: <Shadow {...this.props}><Wrapper {...this.props}>{this.props.children}</Wrapper></Shadow>
}
</div>
)
用法:
render () {
const Shadow = props => <div className="shadow" style={{backgroundColor: '#FFFFFF'}}>{props.children}</div>
const Wrapper = props => <div id="wrapper">Hello</div>
const Example = HOC(
currentPage,
Shadow,
Wrapper
)
return (
<Example />
)
}
更新
要呈现<Wrapper />
的孩子,请使用{this.props.children}
并在HOC中使用class
语法:
const HOC = (currentPage, Shadow, Wrapper) => (
class extends Component {
render () {
return (
<div className="main">
{
currentPage === 'login'
? <Shadow />
: <Shadow><Wrapper>{this.props.children}</Wrapper></Shadow>
}
</div>
)
}
}
)
如果您需要在props
和<Shadow />
上捕获<Wrapper />
,请执行以下操作。注意:我不认为你可以将道具传递给普通的DOM元素,如<div>
标签。但如果它们是带有Capital首字母的其他组件,那么我相信用{...this.props}
传递道具会很好用。
const HOC = (currentPage, Shadow, Wrapper) => (
class extends Component {
render () {
return (
<div className="main">
{
currentPage === 'login'
? <Shadow {...this.props} />
: <Shadow {...this.props}><Wrapper {...this.props}>{this.props.children}</Wrapper></Shadow>
}
</div>
)
}
}
)