reactjs - 如何在React中通过Key查找元素？

<ul>
    <li key='search1'>1234</li>
    <li key='search2'>5678</li>
    <li key='search3'>9</li>
</ul>

如何通过Key查找元素并更改元素值(如addClass / innerHtml)？

注意:在Plain React中-无助焊剂或Jsx。

最佳答案

在React中已删除对key的访问。



您可以简单地使用其他名称(例如'reactKey')并通过 Prop 进行访问。这是一个演示:http://codepen.io/PiotrBerebecki/pen/PGaxdx

class App extends React.Component {
  render() {
    return (
      <div>
        <Child key="testKey1" keyProp="testKey1"/>
        <Child key="testKey2" keyProp="testKey2"/>
        <Child key="testKey3" keyProp="testKey3"/>
        <Child key="testKey4" keyProp="testKey4"/>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log(this.props);  // only 'keyProp' is available

    let getClassName = () => {
      switch (this.props.keyProp) {
        case 'testKey1':
          return 'red';
        case 'testKey2':
          return 'green';
        case 'testKey3':
          return 'blue';
        default:
          return 'black';
       }
    };

    return (
      <div className={getClassName()}>
        Some Text
      </div>
    );
  }
}

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