javascript - 如何使用数组作为 React 组件的道具

Question

我正在学习 React，我正在建立一个站点来熟悉它。我正在玩“use-deencrypt-effect”npm 包，我试图通过 props 设置它的值，但总是抛出异常“无法读取未定义的属性”。

这是我的带有 deencrypt 包的子组件：

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 的道具？

标签： javascriptreactjsweb

Answer 1

您的组件接收道具作为对象。例如。在你的情况下

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

您可以使用解构来解决它：

function TypewriterBig({ values }) {..}