Question

我有一个项目列表，如果点击一个项目，它将显示其内容。我是否需要状态对象中的每个列表项boolean，或者我可以在classname中添加和删除jquery吗？

代码：

 <ul>
  <li> item <div className="hidden"> some extra text ... </div> </li>
  <li> item <div className="hidden"> some extra text ... </div> </li>
  <li> item <div className="hidden"> some extra text ... </div> </li>
  <li> item <div className="hidden"> some extra text ... </div> </li>
</ul>

Answer 1

我是否需要在状态对象中为每个列表项添加布尔值？

是的，您需要为boolean变量中的每个列表项维护state，并根据该state值，呈现list项的内容，试试这个：

this.state = {showItems: []}

onClick(index){
     console.log(index);
     let showItems = this.state.showItems.slice();
     showItems[index] = !showItems[index];
     this.setState({showItems});
}

<ul>
  <li onClick={this.onClick.bind(this,0)}> item {this.state.showItems[0] ? <div> some extra text ... </div> : null} </li>
  <li onClick={this.onClick.bind(this,1)}> item {this.state.showItems[1] ? <div> some extra text ... </div> : null}</li>
  <li onClick={this.onClick.bind(this,2)}> item{this.state.showItems[2] ? <div> some extra text ... </div> : null} </li>
  <li onClick={this.onClick.bind(this,3)}> item {this.state.showItems[3] ? <div> some extra text ... </div> : null}</li>
</ul>

检查此工作代码段：

class App extends React.Component {
  constructor(){
    super();
    this.state = {showItems:[]}
  }
      
  onClick(index){
    let showItems = this.state.showItems.slice(0);
    showItems[index] = !showItems[index];
    this.setState({showItems});
  }
    
  render() {
    return (
      <div className="App">
        <ul>
          <li onClick={this.onClick.bind(this,0)}> item {this.state.showItems[0] ? <div> some extra text ... </div> : null} </li>
          <li onClick={this.onClick.bind(this,1)}> item {this.state.showItems[1] ? <div> some extra text ... </div> : null}</li>
          <li onClick={this.onClick.bind(this,2)}> item{this.state.showItems[2] ? <div> some extra text ... </div> : null} </li>
          <li onClick={this.onClick.bind(this,3)}> item {this.state.showItems[3] ? <div> some extra text ... </div> : null}</li>
        </ul>
        <div style={{marginTop: 100}}>*click on item to open submenu</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

li{
   cursor: pointer;
}

<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='container'/>

点击fiddle查看工作示例：https://jsfiddle.net/mayankshukla5031/18hheyx1/

Answer 2

这是一个非常简单易用的库，它允许您定义类名的条件。库也称为classnames

例如：

import classNames from 'classnames'


<li> item 
    <div className={ classNames({
       'some-static-classname' : true,
       'hidden'                : this.state.hiddenItems.includes('itemX')
     }) }
    > 
        some extra text ... 
    </div> 
</li>

因此，此库仅用于减少条件的样板。您还需要保留隐藏/显示项目的数据。你可能会将这种状态保持在内部状态的反应中。然后就是你的条件。

这是我回答的另一个类似的question and answer。希望能帮助到你。

Answer 3

我认为你应该使用react-bootstrap。否则你可以使用状态并手动更新它。

function drawImageOnCanvas(canvas, texturePath, color, type, onCall
, modelPath, scene, pX, pY, pZ, scale, transform) {
      console.log(canvas, texturePath, color, type, scale);
}

var args = Array.of(document.createElement("canvas"), 1, 2, 3, ...Array(7));

args[10] = {scale:456};

drawImageOnCanvas(...args);

文件：https://react-bootstrap.github.io/components.html#panels-accordion

如何隐藏和显示列表内容：ReactJS

3 个答案: