我有一个react组件，我试图将输入框放在日历的右边。

class PayrollComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      val: 0,
    };
  }

  componentDidUpdate() {
    const inputElement = document.createElement("input");
    inputElement.setAttribute("type", "time");
    inputElement.setAttribute("className", "test");
    inputElement.style.margin = "10px";

    const inputContainer = document.getElementById("inputContainer");
    const br = document.createElement("br");
    // const textNode = document.createTextNode(" ");

    inputContainer.appendChild(inputElement);
    inputContainer.appendChild(inputElement);
    // inputContainer.appendChild(textNode);

    if ((this.state.val % 2 === 0) | (this.state.val === 2)) {
      inputContainer.appendChild(br);
    }
    console.log("Component updates by this many times: " + this.state.val);
  }

  render() {
    return (
      <div>
        <span>
          <CalendarComponent className="test" daysSelected={(days) => this.setState({ val: days + 1 })} /> <div id="inputContainer"></div>
        </span>
        <span>
          <div id="inputContainer" className="test"></div>
        </span>
        <p> {this.state.val} </p>
      </div>
    );
  }
}

export default PayrollComponent;

我在react中把两个span元素放在一起，但是它们在dom中并不是这样显示的。我以为这样会把日历和输入框放在一起呢？我附上了一个截图，显示.

我尝试将日历组件和输入容器 Package 在span标记中，以为这样会使它们内联