2016-05-04 28 views
1

私はインターネットから拾ってきたことから、この関数が機能するはずです。しかし、バベルは、無効なトークンを引用してそれをコンパイルすることはできません。私がプッシュラインをコメントアウトすると、すべてが機能します。要素を配列に配置する

これを行うには正しい構文で私を助けてくれる人がいますか?

renderSuggestionText(highlightText, text) { 
    const fragments = []; 

    let buffer = text; 
    while (buffer.length > 0) { 
    const fragmentStart = text.toUpperCase().indexOf(highlightText.toUpperCase()); 
    if (fragmentStart > 0) { 
     fragments.push(<span>{buffer.substr(0, fragmentStart)}<span>); 
     fragments.push(<span className="bold">{buffer.substr(fragmentStart, highlightText.length)}</span>); 

     buffer = buffer.substr(fragmentStart + highlightText.length); 
    } else { 
     fragments.push(<span>{buffer}<span>); 
     buffer = ''; 
    } 
    } 

    return fragments; 
} 
+3

とトークンバベルが文句を言っているの? '<'?その場合、あなたはBabelのReactプリセットをロードしていないようです。 https://facebook.github.io/react/docs/language-tooling.html#productionizing-precompiled-jsx –

答えて

2

スパンタグの一部に構文エラーがあります。あなたは、すべてのタグを閉じるために失敗した場合

} else { 
    fragments.push(<span>{buffer}<span>); 
    buffer = ''; 
} 

バベルは常にエラーがスローされます:あなたは、あなたがたとえば、あなたのタグ(<span></span>)のすべてを閉じるようにする必要があります。以下のようなものでなければなりません「終了していませんJSX ..」

お読みください:

fragments.push(<span>{buffer}</span>); 
+0

grrをご覧ください。愚かな間違い。ありがとう! – Steven