如何使用數組作為 React 組件的道具

Question

我正在學習 React，我正在建立一個站點來熟悉它。 我正在玩“使用解密效果” npm package 並且我試圖通過道具設置它的值，但總是拋出異常“無法讀取未定義的屬性”。

這是我使用解密 package 的子組件：

import * as React from "react";

import { useDencrypt } from "use-dencrypt-effect";


export function TypewriterBig(values) {

  const { result, dencrypt } = useDencrypt();

  React.useEffect(() => {
    let i = 0;

    const action = setInterval(() => {
      dencrypt(values[i]);

      i = i === values.length - 1 ? 0 : i + 1;
    }, 4000);

    return () => clearInterval(action);
  }, [dencrypt]);

  return  <h2 className="TypewriterBig" >{result}</h2>;
  
} 

這是我要設置道具的父組件：

import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import GlitchText from 'react-glitch-effect/core/GlitchText/Index';
import ich from './../src/img/ich.jpg';
import Media from 'react-bootstrap/Media'


import { TypewriterBig } from './TypewriterBig';



const Home = () => {

  const displayText = ["SEO-Experte", "Salesforce Experte"];


  return (
    
    <Container className="HomeContainer">
    <Row noGutters className="RowHomeContainer">
      <Col md={6} className="ContentHomeContainer" >
        <div className="ContentHome">

        <h4 className="HelloText">Hello, I'm </h4>

          <GlitchText>
          <h1 className="HomeText">This is my Hometext</h1>
          </GlitchText>
            <TypewriterBig values={displayText} />
        </div>

        
      </Col>
  
  
   
  {/*************************** Picture****************************/}
      <Col md={6} className="ImageHome" >
        <Media>
          <img
            width={'100%'}
            height={'auto'}
            className="mr-3"
            src={ich}
            alt="Generic placeholder"
          />
        </Media>
      </Col>
      
      
    </Row>
  </Container>
    );
  }
   
  export default Home;

如何將數組 displayText 聲明為 Typewriter 的道具？

Answer 1

您的組件接收作為 object 的道具。 例如。 在你的情況下

console.log(values)
// {values: ["SEO-Experte", "Salesforce Experte"]}

您可以使用解構來解決它：

function TypewriterBig({ values }) {..}

Answer 2

你可以試試

export function TypewriterBig({values})

或者

export function TypewriterBig(props) {
    const { values } = props;
}