在反应中展开div,类似于jQuery展开方法

时间:2017-03-31 00:03:39

标签: reactjs conditional unwrap

我正在使用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 anotherHow to pass in a react component into another react component to transclude the first component's content?,但没有得到我想要的内容。

2 个答案:

答案 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>
      )
    }
  }
)