1

我正在使用 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 a component into another和How to pass in a react component into another react component to transclude the first component's content? ，但没有得到我要找的东西。

4

2 回答 2

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>

于 2017-03-31T00:27:42.617 回答
0

这是高阶组件的一个很好的用例！

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}和使用classHOC 中的语法：

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 />，请执行以下操作。注意：我不认为你可以将道具传递给像<div>标签这样的普通 DOM 元素。但是，如果它们是具有大写首字母的其他组件，那么我相信通过 with 传递道具{...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>
      )
    }
  }
)
于 2017-03-31T00:33:20.377 回答