React Ratingコンポーネントでは、レーティングに基づいてカスタムメッセージを表示する方法は？

Question

私は現在、react-rating componentを使用しており、ユーザーは1〜5つ星の評価を提供できます。私のレンダリング機能で

私は、次のしている：

 <Rating 
     fractions={2} 
     onRate={(rate) => document.getElementById('label-onrate').innerHTML = rate || ''} 
     /> 
     <span class="label label-default" id="label-onrate"></span> 

これは、5つ星を返し、あなたは星の上に置くと#label-onrateテキストがユーザーに評価値を示すように更新されています...

私は、テキストを更新しますが、評価値ではなく評価値ごとにカスタムメッセージを更新する必要があります。

各評価値ごとにカスタムメッセージを定義し、そのメッセージを#label-onrateに表示させるにはどうすればよいですか？

おかげ

Answer 1

レート変更のためのイベントハンドラを作成し、状態のラベルonrateテキストを保ちます。 ReactでDOMを直接変更する必要はありません。状態を更新すると、コンポーネントが再レンダリングされます。このようなもの：

state = { 
    label: "initial" 
    }; 
    ... 
    onRateChange = (rate) => { 
     if(rate === 1) 
     this.setState({label: "new text"}); //Triggers render 
    } 
    ... 
    <Rating 
    fractions={2} 
    onRate={(rate) => this.onRateChange(rate)} 
    /> 
    <span class="label label-default" id="label-onrate">{this.state.label}</span>