Reactjs 如何在React中通过键查找元素？ 1234 5678 9

如何按键查找元素并更改元素值，如addClass/innerHtml

---

注意：在普通React中-没有焊剂或Jsx。

在React中已删除对

键的访问

props key和ref已经是保留的属性名

…

您不能再从组件实例本身内部访问this.props.ref和this.props.key。

您只需使用不同的名称（例如“reactKey”）并通过道具访问即可。下面是一个演示：

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
子类扩展了React.Component{
render（）{
console.log（this.props）；//只有“keyProp”可用
让getClassName=（）=>{
开关（this.props.keyProp）{
案例“testKey1”：
返回“红色”；
案例“testKey2”：
返回“绿色”；
案例“testKey3”：
返回“蓝色”；
违约：
返回“黑色”；
}
};
返回(
一些文本
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
如果要访问React元素的DOM节点，请使用
ref
属性。

但是在大多数情况下，您可以在不使用Refs的情况下实现所需的功能，因此请确保您没有滥用此功能

以下是React文档中的一些信息：

参考文献和DOM

REF提供了一种访问DOM节点或对在render方法中创建的元素进行反应的方法

何时使用引用

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')
);

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

REF有几个很好的用例：


管理焦点、文本选择或媒体播放
触发命令式动画
与第三方DOM库集成

避免对任何可以声明式完成的操作使用引用

创建引用

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')
);

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

我试图做的是找到一个列表元素并添加一个类，我刚刚添加了更多信息和一个示例。这就是您想要的吗？刚刚添加了一个示例，演示如何修改元素：我同意此解决方法可以解决我的问题，但在React Js中查找find方法是不可能的。我认识的几位react专家希望有一种方法可以访问密钥如果您想更改一个类或元素的内容，不要使用
addClass
或
innerHtml
，而是通过在
render
方法中动态添加类和子类/内容，使其以react方式工作。查找和更改元素是jQuery的方式。如果您正在查找与jQuery.find等效的react（根据下面的评论“我正在尝试…查找列表元素”），我建议您查看此站点，以了解许多jQuery方法的js等效方法：。不管怎样，我还建议你花点时间学习更多关于react如何工作的知识--@zwippie在上面的评论中是死板的。@zwippie:谢谢。你能提供任何链接，让我们简单地了解这些都是必读的。对于有jQuery背景的人来说，这可能会有所帮助。除了链接到外部源代码之外，请在答案中加入必要的引号和代码块。这是为了确保你的答案保持可用和有效，即使链接的网站在将来关闭。