Reaction

Pokazuje różne komponenty w zależności od działań użytkownika.

Opcje

• actionID | string (required): Identyfikator elementu do oglądania. Default: none.
• banner | node: komunikat niestandardowy wyświetlany, jeśli użytkownik nie wykonał jeszcze akcji. Default: none.
• show | (object|function): tabela hash komponentów do wyświetlenia z różnymi odpowiedziami (jeśli nie ma key odpowiadającej odpowiedzi, wartość odpowiadająca klawiszowi default zostanie wyświetlona, jeśli zostanie ustawiona) lub funkcja, która zwraca komponent do wyświetlenia (jedynym argumentem funkcji jest ostatni wynik). Default: {}.

Przykłady

Edytor na żywo

<div> <NumberQuestion question="What is the first prime number?" id="question-with-reaction" /> <Reaction actionID="question-with-reaction" show={( answer ) => { if ( answer === 2 ) { return <p>Awesome, that was correct.</p> } return <p>You might want to review the following video on prime numbers: <VideoPlayer url="https://www.youtube.com/watch?v=mIStB5X4U8M" /> </p>; }} /> </div>

<div>
    <NumberQuestion
        question="What is the first prime number?"
        id="question-with-reaction"
    />
    <Reaction actionID="question-with-reaction" show={( answer ) => {
        if ( answer === 2 ) {
            return <p>Awesome, that was correct.</p>
        }
        return <p>You might want to review the following video on prime numbers:
            <VideoPlayer url="https://www.youtube.com/watch?v=mIStB5X4U8M" />
        </p>;
    }} />
</div>

Wynik

ReferenceError: Provider is not defined