javascript - 如何在自身内部嵌套一个 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 组件嵌套在其自身中。所以它是Subinput中的Subinput，只有当“isChild”为真时（默认为假）。为什么它不起作用？我没有错误，当我将 isChild 更改为 true （通过按钮）时，孩子会出现 0.5 秒然后消失。我不知道为什么。

GitHub 项目

标签： javascriptreactjs