Question

在react中创建可折叠ul/li列表的最佳做法是什么？我希望列表在悬停时扩展，并在不悬停时关闭。

Answer 1

可折叠的手风琴悬停在它上面。

jsFiddle上的工作示例-https://jsfiddle.net/op088krw/98/

HTML

<div id="app"></div>

JS

const PRODUCTS = [
  {"id": 1, "name": "Bag of suck", "price": 100, "details": "You don't want to own this!"},
  {"id": 2, "name": "Bag of luck", "price": 200, "details": "You might want to own this!"},
  {"id": 3, "name": "Bag of fuck", "price": 300, "details": "You really want to own this!"}
];



var ItemList = React.createClass({
  getInitialState(){
    return {active: null}
  },
  handleClick(i){
    return (e) => {
      let active = this.state.active === i ? null : i
      this.setState({active: active})
    }
  },
  display(i){
    return this.state.active === i ? 'block' : 'none'
  },
  liClass(i){
    return this.state.active === i ? 'active' : 'inactive'
  },
  Item(props, i) {
    return(
      <li key={i} onMouseEnter={this.handleClick(i)}>
        <span>
          {props.name + '(' + props.price + ')'}
        </span>
        <div style={{display: this.display(i)}}>
          {props.details}
        </div>
      </li>
    )
  },
  render(){
    let {products} = this.props
    return (
     <ul>
      {products.map(this.Item)}
     </ul>
    )
  }
})

const App = React.createClass({
  getInitialState(){
    return {active: null}
  },
  render(){
    return (
    <div>
       <h1> Hover over li items </h1>
       <ItemList products={PRODUCTS} />
    </div>

    )
  }
})

ReactDOM.render(
 <App />,
 document.getElementById("app")
)

在Reactjs中创建可折叠的ul li

1 个答案: