Question

我想检查一个状态的真值并相应地设置一个类。下面的代码就是这样，但是......

有没有办法以编程方式执行此操作，可能通过for循环添加所有内联函数检查。

原因是因为有些情况我有数百个项目，我不想重复和粘贴相同的代码数百次。

class App extends React.Component {
  constructor() {
    super();
      
    this.state = {
      item1: false,
      item2: true,
      item3: false
    }
  }
  
  render() {    
    return(
      <div className="app">
        <ul>
            <li data-item="item1" className={(this.state.item1) ? "active" : null}>Item 1</li>
            <li data-item="item2" className={(this.state.item2) ? "active" : null}>Item 2</li>
            <li data-item="item3" className={(this.state.item3) ? "active" : null}>Item 3</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.active {
  color: green;
}

<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 1

如果有成千上万的这些，它们可能应该是一个数组而不是一个对象。但是如果需要，我们可以将对象的属性名称作为数组。

改为使用数组（参见注释）：

＆＃13;

class App extends React.Component {
  constructor() {
    super();

    // Turning items into an array
    this.state = {
      items: [
        {name: "item1", label: "Item 1", state: false},
        {name: "item2", label: "Item 2", state: true},
        {name: "item3", label: "Item 3", state: false}
      ]
    };
  }
  
  render() {    
    return(
      <div className="app">
        <ul>
          {/* Loop through the items, outputting them*/}
          {this.state.items.map(item => (
            <li data-item={item.name} className={item.state ? "active" : null}>{item.label}</li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

.active {
  color: green;
}

＆＃13;

<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>

＆＃13;

使用现有对象和另一个对象为我们提供项目标签（请参阅注释）：

＆＃13;

class App extends React.Component {
  constructor() {
    super();
      
    this.state = {
      item1: false,
      item2: true,
      item3: false
    };
    
    // The labels we want on the items
    this.itemNames = {
      item1: "Item 1",
      item2: "Item 2",
      item3: "Item 3"
    };
  }
  
  render() {    
    return(
      <div className="app">
        <ul>
          {/* Loop through the items, outputting them*/}
          {Object.keys(this.state).map(key => (
            <li data-item={key} className={this.state[key] ? "active" : null}>{this.itemNames[key]}</li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

.active {
  color: green;
}

＆＃13;

<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>

＆＃13;

JSX内联函数（以编程方式设置？）

1 个答案: