ReactJS使用jQuery的动画

Question

我想呈现一个组件，但值是在一个jQuery函数内检查输入字段中的更改。

控制台返回此错误：

Objects are not valid as a React child (found: [object HTMLDocument]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of 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

实在没有很好的理由，当您使用反应使用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> 
    ) 
    } 
}) 

您还希望包括通过搜索的数据搜索和返回一个对象，你可以再呈现到使用地图和道具结果组件的阵列功能。你如何做到这一点将取决于可搜索数据来自何处（React store，后台数据库表等）。

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