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

コード：本当にあなたが反応を使用しているときにjQueryを使用する正当な理由がない

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

。

JSXのinput要素を含むhtmlを上位レベルのReactコンポーネントとして記述する場合は、ref属性で入力を参照するか、またはキー入力イベントリスナーを入力自体に追加することができます。

例：

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を使用して説明しましたが、詳しい説明はしていません。