Javascript React-存储为变量的组件未在嵌套组件中呈现

我有以下组成部分：

信息显示器：

动物信息：

其他信息：

通过循环到infos数组中检索信息。这工作正常，请参阅

我遵循了将信息大写的原则，并确保它被正确地视为JSX组件

键入组件来自

信息在输入外部显示和交换，但在输入内部不显示和交换。交换信息意味着调用UpdateDisplayInfo，因此会触发。我不明白为什么打字时不显示信息。

---

这是一个与库相关的问题吗？

如果您查看库源代码，就会明白为什么这不起作用

，所以您必须将一些文本直接传递给组件，才能对其进行渲染。此外，组件需要能够显示传递给它的子组件：

const Info={children}=>{ 回来 {儿童} } 这是道具`

---

如果您查看库源代码，就会明白为什么这不起作用

，所以您必须将一些文本直接传递给组件，才能对其进行渲染。此外，组件需要能够显示传递给它的子组件：

const Info={children}=>{ 回来 {儿童} } 这是道具`

---

我认为键入组件的实际状态不会改变，其内容也不会重新呈现。另外，当您仍要更改状态时，将“循环”属性添加到键入组件有什么意义。一个建议是删除循环属性，并添加可能带有“this.state.currentIndex”作为值的键属性。这将导致键入组件在更改信息组件时始终重新渲染…我认为键入组件的实际状态不会更改，并且其内容不会重新渲染。另外，当您仍要更改状态时，将“循环”属性添加到键入组件有什么意义。一个建议是删除循环属性，并添加可能带有“this.state.currentIndex”作为值的键属性。这将导致键入组件在更改信息组件时始终重新渲染。。。

import React, { Component } from "react";
import Typing from "react-typing-animation";

import AnimeInfo from "./animeInfo";
import OtherInfo from "./otherInfo";

const infos = [AnimeInfo, OtherInfo];

export class InfoDisplayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
    };

    this.updateDisplayedInfo = this.updateDisplayedInfo.bind(this);
  }

  updateDisplayedInfo = () => {
    const newState = {
      currentIndex: this.state.currentIndex,
    };
    if (this.state.currentIndex === infos.length - 1) {
      newState.currentIndex = 0;
    } else {
      newState.currentIndex++;
    }
    this.setState(newState);
  };

  render() {
    const Info = infos[this.state.currentIndex];
    return (
      <React.Fragment>
        <Info />
        <Typing onFinishedTyping={this.updateDisplayedInfo} loop>
          <Info />
          <Typing.Reset count={1} delay={2000} />
        </Typing>
      </React.Fragment>
    );
  }
}

export default InfoDisplayer;

import React, { Component } from "react";

export class AnimeInfo extends Component {
  render() {
    return <span>..watching anime</span>;
  }
}

export default AnimeInfo;

import React, { Component } from "react";

export class OtherInfo extends Component {
  render() {
    return <span>..simple test</span>;
  }
}
export default OtherInfo;