單擊按鈕時將組件回傳到id

我想將一個組件回傳<SaveTask/>到一個 div 標簽，其中<div id="saveTask">. 我嘗試使用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>
        )
    }
}

uj5u.com熱心網友回復：

是的，所以 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 內，那么您只需將三元移動到其中。

uj5u.com熱心網友回復：

希望下面的回答對你有幫助

使用功能組件實作

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>
        )
    }
}

標籤：javascript 反应

上一篇：在javascript中包含列舉等效項的串列理解

下一篇：VueJSON寫入和讀取