Saya bekerja dengan Docusaurus, yang menyediakan siteConfig.js sebagai alat peraga konfigurasi. Karena itu, saya harus menggunakan alat peraga ini untuk membangun komponen situs saya. Kode kerja diformat seperti ini:

const React = require("react");

class SamplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return <div>{siteConfig.title}</div>;
  }
}

module.exports = SamplePage;

Saya memiliki segmen kode kerja lain yang ditampilkan dalam pertanyaan, tetapi menggunakan pengaturan yang berbeda di mana const {useState} = React; digunakan sebagai pengganti const React = require("react"); dan <div id="root"> dengan ReactDOM.render(<SamplePage/>, document.getElementById("root")); sebagai gantinya dari module.exports = SamplePage;. Saya mengerti ini memungkinkan menjalankan cuplikan kode di SE, tetapi itu tidak menunjukkan kepada saya bagaimana impor dan ekspor seharusnya berfungsi dalam konteks proyek Docusaurus ini. Yang ingin saya lakukan adalah memasukkan segmen kode ke dalam React.Component atau dengan cara lain membuat komponen ini untuk menggunakan kaituseState dengan alat peraga konfigurasi untuk menegaskan atau menolak atribut isOpen dari 3 detail tag, menggunakan 2 button(s) untuk mengontrol hook:

const {useState} = React;

const SamplePage = () => {
    const [isOpen, setIsOpen] = React.useState(false); 

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
                <p>testing</p>
            </details>

            <button onClick={() => setIsOpen(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }

ReactDOM.render(<SamplePage/>, document.getElementById("root"));

Untuk cuplikan kode:

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

Pertanyaan saya adalah bagaimana menggabungkan segmen kode ini. Saya telah mencoba membuat komponen ini dengan berbagai cara, tetapi saya tidak bisa mendapatkan button(s) untuk mengaktifkan efek onClick(). Misalnya, saya mencoba:

const React = require("react");

const SamplePage, {useState} = () => {
  const [isOpen, setIsOpen] = React.useState(false); 
  const siteConfig = this.props.config;

  return (
      <div>
          <details open={isOpen}>
              <summary>
                  First text detail.
              </summary>
              <p>testing</p>
          </details>
          <details open={isOpen}>
              <summary>
                  Second text detail.
              </summary>
              <p>testing</p>
          </details>
          <details open={isOpen}>
              <summary>
                  Third text detail.
              </summary>
              <p>testing</p>
          </details>

          <button onClick={() => setIsOpen(false)}>Open All Details.</button>
          <button onClick={() => setIsOpen(true)}>Close All Details.</button>
      </div>
  );
}

module.exports = SamplePage;

Ini melempar "panggilan kait tidak valid", tentu saja, karena saya tidak dapat benar-benar menggunakan kait useState dalam pengaturan saya saat ini. Saya mendapatkan token tak terduga dan kesalahan referensi di semua konstruksi saya yang lain.

0
Lichtung 28 Oktober 2019, 23:32

2 jawaban

Jawaban Terbaik

Anda perlu membalik Anda benar/salah bool di onClicks Anda (buka seharusnya benar)

Ingatlah bahwa 'buka' onClick Anda membuka drop-down dengan baik tetapi 'close' onClick hanya akan menutup drop-down jika 'open' onClick menetapkan status ke true pertama

Jika Anda perlu mengekspor ini alih-alih merendernya ke DOM (dan tidak dapat/tidak ingin mengubah pernyataan impor ES6 di tempat lain), maka ubah ReactDom.render() menjadi:

module.exports = SamplePage;

Contoh lengkap:

const React = require('react')
const {useState} = React;

const SamplePage = (props) => {
    const [isOpen, setIsOpen] = useState(false); 
    const siteConfig = props.config

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
                <p>testing</p>
            </details>

            <button onClick={() => setIsOpen(true)}>Open All Details.</button>
            <button onClick={() => setIsOpen(false)}>Close All Details.</button>
        </div>
    );
  }

module.exports = SamplePage;

Cuplikan yang dapat dijalankan:

// const React = require('react')
const {useState} = React; //refer to above note

const SamplePage = (props) => {
    const [isOpen, setIsOpen] = useState(false);
    const siteConfig = props.config

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
                <p>testing</p>
            </details>

            <button onClick={() => setIsOpen(true)}>Open All Details.</button>
            <button onClick={() => setIsOpen(false)}>Close All Details.</button>
        </div>
    );
  }

ReactDOM.render(<SamplePage/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>
1
Willman.Codes 30 Oktober 2019, 16:02

Saya pikir Anda mendapatkan perusakan objek yang bercampur dengan impor. Berikut adalah rincian dari apa yang harus Anda lakukan:

// this line imports the react library, which we need in order to
// export a JSX component
const React = require("react");

// this line pulls the useState function out of the React library
// using object destructuring
const { useState } = React;
// it is the same as const useState = React.useState

// we dont need to pass useState in as a prop because its already
// imported in the same file
const SamplePage = props => {
  // and here we don't need to call React.useState because it has been
  // separated into its own variable
  const [isOpen, setIsOpen] = useState(false); 
  const siteConfig = props.config; // functional components don't use this

  return (
      <div>
          <details open={isOpen}>
              <summary>
                  First text detail.
              </summary>
              <p>testing</p>
          </details>
          <details open={isOpen}>
              <summary>
                  Second text detail.
              </summary>
              <p>testing</p>
          </details>
          <details open={isOpen}>
              <summary>
                  Third text detail.
              </summary>
              <p>testing</p>
          </details>

          <button onClick={() => setIsOpen(false)}>Open All Details.</button>
          <button onClick={() => setIsOpen(true)}>Close All Details.</button>
      </div>
  );
}

module.exports = SamplePage;

Beri tahu saya jika Anda memiliki pertanyaan lagi.

EDIT

Saya menambahkan parameter props ke fungsi, saya tidak sengaja mengabaikannya. Juga, saat menggunakan komponen fungsional Anda tidak menggunakan kata kunci this saat mengakses props, panggil saja sendiri.

1
Chris Sandvik 28 Oktober 2019, 20:55