如何在React中修改、获取或设置属性？从jQuery迁移的技术疑问

嘿，我懂你这种从jQuery直接操作DOM切换到React时的困惑——毕竟React的核心思路是状态驱动UI，和jQuery直接碰DOM的方式完全不同。咱们把你的代码改成React的正确写法，顺便帮你理解背后的逻辑～

为什么不能用jQuery直接改属性？ #

在React里，组件的UI是由state和props决定的。如果你用jQuery直接修改DOM属性，React的虚拟DOM和真实DOM就会出现不一致，后续React重新渲染时会覆盖你手动改的内容，这完全违背了React的设计原则。

正确的React实现方式 #

我们把data-correctans的值存在组件的状态里，通过更新状态来让React自动更新DOM属性：

class App extends React.Component {
  // 初始化状态，保存属性的初始值
  constructor(props) {
    super(props);
    this.state = {
      correctAnsStatus: 'status'
    };
    // 绑定方法上下文（可选，也可以用箭头函数替代）
    this.changeAttr = this.changeAttr.bind(this);
  }

  changeAttr() {
    // 用setState更新状态，React会自动重新渲染UI
    this.setState({
      correctAnsStatus: 'changed_status'
    });
  }

  render () {
    return (
      <div>
        {/* 把状态值绑定到data属性上 */}
        <div data-correctans={this.state.correctAnsStatus}>
          Hi I am new to react, Need to do some DOM manipulation!!
        </div>
        {/* 直接绑定方法，不用嵌套箭头函数也能正常工作 */}
        <button onClick={this.changeAttr}>Change attr!</button>
      </div>
    );
  }
}

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

关键点解释 #

• 状态驱动：所有需要动态变化的属性/内容，都应该存在state里。当你调用setState时，React会重新计算虚拟DOM，只更新真实DOM中需要改变的部分，既高效又能保证UI和数据的一致性。
• 避免直接操作DOM：除非你在和非React的第三方库交互（比如某些老的图表插件），否则尽量不要手动修改DOM。

特殊场景：真的需要直接操作DOM怎么办？ #

如果遇到必须手动修改DOM的情况，你可以用React的createRef来获取DOM元素：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref用于获取DOM元素
    this.correctAnsDiv = React.createRef();
  }

  changeAttr() {
    // 通过ref获取真实DOM元素，然后修改属性
    this.correctAnsDiv.current.setAttribute('data-correctans', 'changed_status');
  }

  render () {
    return (
      <div>
        <div ref={this.correctAnsDiv} data-correctans="status">
          Hi I am new to react, Need to do some DOM manipulation!!
        </div>
        <button onClick={() => this.changeAttr()}>Change attr!</button>
      </div>
    );
  }
}

但再次强调：这种方式只适合特殊场景，React的首选方式还是状态驱动UI。

内容的提问来源于stack exchange，提问作者Wiz Khalifa