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的動畫，但沒有詳細說明。