尝试在 reactjs 上创建打字效果

Question

所以基本上我已经创建了打字效果，但我只能让数组中的第一个字符串起作用。我想使用打字效果在新行中写出所有数组。我在下面列出了 JSX 和 CSS 文件。我还应该指出，这只是一个大项目的一部分，所以试图运行这个 JSX 和 css 是行不通的

import React  from 'react';
import "./Content.css";


const content =()=>{
	const message =["WELCOME TO MY WORLD","THIS IS MY WEBSITE","I AM AT YOUR SERVICE"];
	let i =0 ;
	for(i=0; i<message.length;i++){
		  return(
			<div className='background'>
		  <h1 className="typewriter">
	  		{message[i]}	
	  	</h1>
	  	</div>

	  	)

	}
	
}

export default content;

background{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

}

canvas{width: 60;


}

.typewriter {
  text-align: center;
  overflow: hidden; 
  border-right: .15em solid black; 
  color: white;
  font-family: Courier New;
  top:30%;
  font-size: 40px;
  white-space: nowrap; 
  letter-spacing: .30em;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width:20% }
  to { width: 50% }
}


@keyframes blink-caret {
  from, to { border-color: transparent }
}

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

Answer 1

可以使它成为这样的类组件：

class Typer extends React.Component {

  static defaultProps = {
    heading: '',
    dataText: []
  }

  constructor(props) {
    super(props);

    this.state = {
      text: '',
      isDeleting: false,
      loopNum: 0,
      typingSpeed: 150
    }
  }

  componentDidMount() {
    this.handleType();
  }

  handleType = () => {
    const { dataText } = this.props;
    const { isDeleting, loopNum, text, typingSpeed } = this.state;
    const i = loopNum % dataText.length;
    const fullText = dataText[i];

    this.setState({
      text: isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1),
      typingSpeed: isDeleting ? 30 : 150
    });

    if (!isDeleting && text === fullText) {
      
      setTimeout(() => this.setState({ isDeleting: true }), 500);
      
    } else if (isDeleting && text === '') {
      
      this.setState({
        isDeleting: false,
        loopNum: loopNum + 1
      });
      
    }

    setTimeout(this.handleType, typingSpeed);
  };

  render() {    
    return (
      <h1>{ this.props.heading }&nbsp;
        <span>{ this.state.text }</span>
        <span id="cursor"/>
      </h1>
    );
    
  }
}

ReactDOM.render(
  <Typer
    heading={'Things I want to type:'}
    dataText={["WELCOME TO MY WORLD","THIS IS MY WEBSITE","I AM AT YOUR SERVICE"]} 
  />, 
  document.getElementById('app')
);

@import url('https://fonts.googleapis.com/css?family=VT323');
body {
  font-family: 'VT323', monospace;
  background-color: #003B00;
  padding: 1em 2em;
}

h1 {
  color: #00FF41;
}

#cursor {
  border-left: .1em solid #00FF41;
  animation: blink .7s steps(1) infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

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

<div id="app"></div>

笔链接：https: //codepen.io/AliKlein/pen/aPyKjy JSFiddle：https : //jsfiddle.net/am9qke3v/

Answer 2

您将在循环的第一次迭代中从函数返回单个项目。这是不正确的。您需要返回一个 JSX 对象数组：

const content =()=>{
  const message =["WELCOME TO MY WORLD","THIS IS MY WEBSITE","I AM AT YOUR SERVICE"];
  let i =0 ;
  let jsxArray = [];
  for(i=0; i<message.length;i++){
    jsxArray.push(
      <div className='background'>
        <h1 className="typewriter">
            {message[i]}    
        </h1>
      </div>
     );
  }
  return jsxArray;
}