Potrzebuję wyrenderować kod HTML po kliknięciu elementu, jest to bardzo prosta rzecz, ale jestem nowy w React, więc pomagam każdemu. Mam tę funkcję, która zwraca niektóre pliki jsx i nie zamierzam renderować jej po kliknięciu.

W tym przykładzie powinienem dostać „Hello” pod li z klasą linku,

Oto mój kod;

const returnSomething = () => {
        return (
            <h1>Hello</h1>
        );
    };

    return (
        <div>
            <div>
                <ul>

                </ul>
                <ul>
                    <li className="link" onClick={() => returnSomething()}>Selector</li>
                    { returnSomething }
                </ul>
            </div>
        </div>
    );
0
Pokreniseweb 1 kwiecień 2020, 13:43

4 odpowiedzi

Najlepsza odpowiedź

Z Twoim kodem jest kilka problemów.

Masz funkcję, która zwraca trochę JSX:

const returnSomething = () => {
  return <h1>Hello</h1>
}

I wywołujesz to za pomocą modułu obsługi onClick:

<li className="link" onClick={() => returnSomething()}>

To nic nie daje. Wszystko, co robisz, to wykonywanie funkcji, ale JSX jest zwracany wewnątrz procedury obsługi onClick:

onClick={() => // JSX gets returned here
  returnSomething()}>

Co oznacza, że nic się nie dzieje z zwracanym JSX. Nie jest renderowany, ponieważ jest zwracany do onClick.

Następnie piszesz również następujący kod:

{ returnSomething }

Ale nie wykonujesz funkcji, więc próbujesz zwrócić rzeczywisty obiekt funkcji wewnątrz JSX. To nie renderuje wyniku funkcji.

Ponadto procedura obsługi onClick nie jest połączona z funkcją, którą zwracasz.

Mam na myśli to, że:

onClick={() => returnSomething()}>

Nie ma z tym związku:

{ returnSomething }

Nie są połączone. Zatem wykonanie returnSomething wewnątrz onClick nie wpływa na returnSomething, które zwracasz.


Aby warunkowo coś wyrenderować, musisz użyć state. onClick powinien ustawić stan, na przykład:

Na przykład:

const Component = () => {
    const [isTextVisible, setIsTextVisible] = useState(false)

    return (
        <div>
            <div>
                <ul></ul>
                <ul>
                    <li className="link" onClick={() => setIsTextVisible(true)}>
                        Selector
                    </li>
                    {isTextVisible && <h1>Hello</h1>}
                </ul>
            </div>
        </div>
    )
}

Początkowo wartość isTextVisible to false, więc h1 nie będzie renderowany. Ale kiedy klikniesz li, program obsługi onClick wywołuje setIsTextVisible(true), co oznacza, że teraz isTextVisible to true, a zatem tag h1 renderuje.

2
JMadelaine 1 kwiecień 2020, 11:01

Można dodać na podstawie zmiennej stanu, można wyświetlić po kliknięciu

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showText: false };
  }

  setText = () => {
    this.setState({ showText: true });
  };

  returnSomething = () => <h1>Hello</h1>;

  render() {
    return (
      <div>
        <div>
          <ul />
          <ul>
            <li className="link" onClick={this.setText}>
              Selector
            </li>
            {this.state.showText && this.renderSomething}
          </ul>
        </div>
      </div>
    );
  }
}

0
vr12 1 kwiecień 2020, 10:58

Musisz użyć stanu, aby osiągnąć to, co chcesz (renderowanie znaczników tylko wtedy, gdy przycisk został kliknięty).

function App() {

const returnSomething = () => <h1>Hello</h1>
const [isVisible, setIsVisible] = React.useState(false)

    return (
        <div>
            <div>
                <ul>

                </ul>
                <ul>
                    <li className="link" onClick={() => setVisible(true)}>Selector</li>
                    { isVisible && returnSomething() }
                </ul>
            </div>
        </div>
    );
}
0
user13124036user13124036 1 kwiecień 2020, 10:53

Spróbuj tego

const [show, setState] = useState(false);
const returnSomething = () => {
    if (show) {
      return <h1>Heelo</h1>;
    }
    return null;
  };

<div onClick={() => setState(!show)}>Click here {returnSomething()}</div>
0
iamhuynq 1 kwiecień 2020, 10:52