如何在自己内部嵌套一个React组件？

Question

import React, { Component } from "react";
import Condition from "./Condition";
import styled from "styled-components";

const SubinputForm = styled.form`
  text-align: left;
`;

const SubinputElementList = styled.li`
  text-align: left;
  list-style-type: none;
  list-style-position: inside;
`;

class Subinput extends Component {
  state = {
    isChild: false,
    type: "Text"
  };
  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };
  onClick = () => {
    this.setState({ isChild: true });
  };
  render() {
    return (
      <div>
        <SubinputForm>
          <Condition typeOfInput={this.props.typeOfInput} />
          Question: <input />
          <br />
          Type:{" "}
          <select onChange={this.onChange} name="type" value={this.state.type}>
            <option>Text</option>
            <option>Number</option>
            <option>Yes / No</option>
          </select>
          <br />
          <br />
          <button onClick={this.onClick}>Add subinput</button>{" "}
          <button>Delete</button>
          <br />
        </SubinputForm>
        {this.state.isChild ? (
          <ul>
            <SubinputElementList>
              <Subinput typeOfInput={this.state.type} />
            </SubinputElementList>
          </ul>
        ) : (
          <ul>
            <SubinputElementList>Brak kolejnego subinputa</SubinputElementList>
          </ul>
        )}
      </div>
    );
  }
}
export default Subinput;

我将Subinput组件嵌套在其内部。因此，仅当“ isChild”为true（默认为false）时，它才是Subinput中的Subinput。为什么不起作用？我没有任何错误，当我将isChild更改为true（通过按钮）时，该孩子实际上会出现0.5秒，然后消失。我不知道为什么。

GitHub Project