在 react 中解包一个 div，类似于 jQuery 解包方法

Question

我正在使用 React JSX。我有一个带有 className="shadow" 的 div，如下所示。

<div className="main">
  <div className="shadow" style={{backgroundColor: "#FFFFFF"}}>
    <div id="wrapper">
      Hello
    </div>
  </div>
</div>

基于某个条件是真还是假，我想删除 className="shadow" 的 div，但希望保持每个 div 包括 id="wrapper" 的 div 完整。类似于 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?，但没有找到我想要的。

Answer 1

也许可以帮助您的是根据您所在的页面更改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>

Answer 2

这是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>
      )
    }
  }
)

如果您需要在<Shadow /> 和<Wrapper /> 上捕获props，请执行以下操作。注意：我认为您不能将道具传递给普通的 DOM 元素，例如 <div> 标签。但是，如果它们是具有大写首字母的其他组件，那么我相信使用 {...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>
      )
    }
  }
)