Question

我尝试渲染一个组件，但该值位于一个jQuery函数中，用于检查输入字段中的更改。

控制台返回此错误：

对象作为React子对象无效（找到：[object HTMLDocument]）。如果您要渲染子集合，请使用数组或者使用React中的createFragment（object）包装对象加载项。检查Result
的渲染方法

代码：

import React, { Component } from 'react';
import Result from './Result';
import * as $ from 'jquery';
import ReactFM from '../lib/ReactFM';
import { config } from '../config';

export let reactfm = new ReactFM(config.apiKey);

let name = $(() => {
  $('.input-search').keypress(() => {
    let inp = $('.input-search').val();
    return reactfm.searchArtists(inp);
  });
});

class SearchResults extends Component {
  render() {
    return (
      <div className="search-results">
        <Result avatar="" name={name} desc="um deus" />
      </div>
    );
  }
}

export default SearchResults;

Answer 1

在使用React时，没有充分的理由使用jQuery。

如果您（并且您应该）将包含JSX中的输入元素的html作为更高级别的React组件编写，则可以通过ref属性引用输入或者向输入本身添加keydown事件侦听器。

示例：

const HigherLevelParentComponent = React.createClass({
  getDefaultState() {
    searchQuery: ''
  },

  searchArtists(event) {
    this.setState({
      searchQuery: event.target.value
    })
  },

  render() {
    (
      <div>
        <input type="text" onKeyDown={(event) => this.searchArtists(event)}/>
        <Result ... /> // You probably want this to be a mapped array of Result components with unique props instead
      </div>
    )
  }
})

您还需要包含一个搜索可搜索数据的函数，并返回一个对象数组，然后您可以使用制图和道具将这些对象渲染到Result组件中。如何执行此操作取决于可搜索数据的来源（React存储，后端数据库表等）。

另外，你提到过使用jQuery动画，但没有详细说明。

ReactJS使用jquery进行动画制作

1 个答案: