单击按钮时将组件返回到 id

Question

我想将组件<SaveTask/>返回到<div id="saveTask">的 div 标签。 我尝试使用this.setState() ，但它更改了容器并显示<SaveTask/>组件。 我想保留该容器并在该容器下，我想在单击按钮后附加一个组件。 有什么方法可以使用document.getElementById('saveTask')添加组件。

import React, { Component } from 'react'
import SaveTask from './SaveTask';


export default class TaskHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            saveTask: false,
        }

        this.showComp = () => {
            this.setState({
                saveTask: true,
            })
        }
    }

    render() {
        if(this.state.saveTask) {
            return (
                
                document.getElementById('saveTask').innerHTML = <SaveTask/>
                
            )
        }

        return (
            <div>
            <div className="container-fluid bg-white border-bottom">
                <div className="row">
                    <div className="col-12">
                        <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
                        <div className="tasks-lower">
                            <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="saveTask">
                Return a component to this section when clicking the button
            </div>
            </div>
        )
    }
}

Answer 1

是的，所以 React 的美妙之处在于您不需要也不应该更新 innerhtml 来更新组件。 您可以简单地使用三元来确定稍后要显示的组件：

import React, { Component } from 'react'
import SaveTask from './SaveTask';


export default class TaskHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            saveTask: false,
        }

        this.showComp = () => {
            this.setState({
                saveTask: true,
            })
        }
    }

    render() {
        return (
            <div>
            <div className="container-fluid bg-white border-bottom">
                <div className="row">
                    <div className="col-12">
                        <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
                        <div className="tasks-lower">
                            <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button>
                        </div>
                    </div>
                </div>
            </div>
            {this.state.saveTask ? (
              <SaveTask/>
            ) : (
              <div id="saveTask">
                Return a component to this section when clicking the button
              </div>
            )}
            </div>
        )
    }
}

在这种情况下，您是说，“如果 this.state.saveTask 为真，则显示<SaveTask />否则，显示<div id="saveTask">元素。如果您想在该 div 内，那么您只需移动里面的三元。

Answer 2

希望下面的回答对你有帮助

使用功能组件实现

import React, { useState } from "react";
import SaveTask from "./SaveTask";

function TaskHeader() {
  const [show, setShow] = useState(false);

  const showComp = () => {
    setShow(true);
  };

  return (
    <div>
      <div className="container-fluid bg-white border-bottom">
        <div className="row">
          <div className="col-12">
            <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
            <div className="tasks-lower">
              <span className="text-secondary text-size">TASK</span>
              <button
                className="text-primary btn-size"
                type="button"
                onClick={showComp}
              >
                +
              </button>
            </div>
          </div>
        </div>
      </div>
      <div id="saveTask">{show && <SaveTask />}</div>
    </div>
  );
}

export default TaskHeader;

使用类组件实现

import React, { Component } from 'react'
import SaveTask from './SaveTask';


export default class TaskHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            saveTask: false,
        }

        this.showComp = () => {
            this.setState({
                saveTask: true,
            })
        }
    }

    render() {
        return (
            <div>
            <div className="container-fluid bg-white border-bottom">
                <div className="row">
                    <div className="col-12">
                        <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
                        <div className="tasks-lower">
                            <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button>
                        </div>
                    </div>
                </div>
            </div>
              <div id="saveTask">`
               { this.state.saveTask && <SaveTask/> }
              </div>
            </div>
        )
    }
}