如何在 React 组件中使用 Props 到 jQuery答案

【问题标题】：How to use Props to jQuery in React component如何在 React 组件中使用 Props 到 jQuery
【发布时间】：2021-12-30 12:55:26
【问题描述】：

希望你能理解这个简单的例子。

我尝试在第一次渲染时更改我的 HTML 元素的背景颜色，方法是在 React Component 中处理它，并借助 jQuery。

这是我的 React 组件中的代码（props 是从 父组件的状态 传递的）：

class QuoteBox extends React.Component {
  constructor(props) {
    super(props)
  }
  
  
  componentDidMount() {
    $('#root').css('background-color', this.props.color); 
    $('#text').css('color', this.props.color);
    $('#author').css('color', this.props.color);
  }

  render() {   
    return (
      <div>
          <div id="quote-box" className="quote-box">
            <div className="quote">
              <span id="text" class="quote-text">{this.props.quote}</span>
            </div>
            <div id="author" className="quote-author">
              <span>- {this.props.author}</span>
            </div>
      </div>
    )
  }

componentDidMount() 中的代码似乎无法识别this.props.color。但是如果更改为$('#root').css('background-color', 'green');，它会在第一次渲染时立即将背景更改为绿色。

但在render() 中它识别出另一个道具。

那么我做错了什么？有没有办法在 React 中使用 jQuery 来定位 HTML 元素？

【问题讨论】：

您不应该尝试将 jQuery 与 React 混合使用。 jQuery 使用命令式代码风格，而 React 使用声明式风格——它们不能很好地混合。如果您使用 React，则不需要 jQuery。
对于实际问题 - 检查您从父级传递给该组件的道具。你没有显示这个，但我很确定那里不会有一个“颜色”值（或者它不会是一个公认的 CSS 颜色的字符串 - 请记住，十六进制颜色需要一个 # 在开头字符串）。
@RobinZigmond 实际上，当我在反应组件内的 HTML 元素上直接内联样式时，它可以工作。像这样：<div style={{'background': this.props.color}};>
@RobinZigmond 所以在 React 中使用 jQuery 没用？
我不敢说“没用”，但我还没有看到一个合理的用例。对于您在这里所做的事情，只需按照您在上一条评论中已经指出的那样直接设置样式。当然，除非您希望仅在第一次渲染后更改颜色，但您可以改为使用 state。

标签： javascript jquery reactjs

【解决方案1】：

这很可能发生，因为在第一次渲染时，props.color 没有设置。很有可能，在父元素上设置会导致重新渲染 QuoteBox，而不会运行仅在第一次渲染时运行的 componentDidMount。

除了您不应该将 jQuery DOM 操作与 React 混合使用之外，为了测试您的场景，请尝试使用 componentDidUpdate 代替，它很可能会解决您的问题。

【讨论】：