Javascript 如何从另一个组件的按钮运行组件的功能？

这是组件TimeDisplay，其中有函数handleTimer

import React, {Component} from "react";
import format from './formatTime';

class TimeDisplay extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time: 0,
            on: false,
        }
    }

    handleTimer = () => {
        if (this.state.on) {
            clearInterval(this.timer);
        } else {
            this.timer = setInterval(() => {
                this.setState({time: ++this.state.time})
                console.log("timer running");
            }, 10)
        }
        this.setState({on: !this.state.on})
    }

    render() {
        var time = format(this.state.time);
        return <div>
            <div className="controls">
                <button onClick={this.handleTimer}>Run</button>
            </div>
            <h1 className="display-time">{time}</h1>
        </div>
    }
}

export default TimeDisplay;

import React，{Component}来自“React”；
从“/formatTime”导入格式；
类TimeDisplay扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间:0,，
关于：错，
}
}
handleTimer=（）=>{
if（this.state.on）{
clearInterval（这个计时器）；
}否则{
this.timer=setInterval（（）=>{
this.setState（{time:++this.state.time}）
日志（“计时器运行”）；
}, 10)
}
this.setState（{on:！this.state.on}）
}
render（）{
var time=格式（this.state.time）；
返回
跑
{time}
}
}
导出默认时间显示；

---

现在，我要做的是创建一个按钮，它的行为与render（）中的按钮完全相同，但在另一个组件中。如何操作？

如果您有两个组件，则将按钮保留在一个组件中，导入到第二个组件中，并将handleTimer函数作为道具传递给下面的组件，我将给出示例

    import React, {Component} from "react";
    import format from './formatTime';

    class ButtonAction extends Component {
        constructor(props) {
            super(props);
            this.state = {
                time: 0,
                on: false,
            }
        }

        handleTimer=()=>{
          this.props.handleTimer();
        }

        render() {
            var time = format(this.state.time);
            return <div>
                <div className="controls">
                    <button onClick={this.handleTimer}>Run</button>
                </div>
                <h1 className="display-time">{time}</h1>
            </div>
        }
    }

    export default ButtonAction ;

import React，{Component}来自“React”；
从“/formatTime”导入格式；
类按钮操作扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间:0,，
关于：错，
}
}
handleTimer=（）=>{
this.props.handleTimer（）；
}
render（）{
var time=格式（this.state.time）；
返回
跑
{time}
}
}
导出默认按钮操作；

在TimeDisplay组件中导入新组件

import NewComponent from "./ButtonAction ";
import React, {Component} from "react";
import format from './formatTime';

    class TimeDisplay extends Component {
        constructor(props) {
            super(props);
            this.state = {
                time: 0,
                on: false,
            }
        }

        handleTimer = () => {
            if (this.state.on) {
                clearInterval(this.timer);
            } else {
                this.timer = setInterval(() => {
                    this.setState({time: ++this.state.time})
                    console.log("timer running");
                }, 10)
            }
            this.setState({on: !this.state.on})
        }

        render() {
            var time = format(this.state.time);
            return <div>
                <NewComponent handleTimer ={this.handleTimer}  /> 
            </div>
        }
    }

    export default TimeDisplay;

从“/ButtonAction”导入新组件；
从“React”导入React，{Component}；
从“/formatTime”导入格式；
类TimeDisplay扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间:0,，
关于：错，
}
}
handleTimer=（）=>{
if（this.state.on）{
clearInterval（这个计时器）；
}否则{
this.timer=setInterval（（）=>{
this.setState（{time:++this.state.time}）
日志（“计时器运行”）；
}, 10)
}
this.setState（{on:！this.state.on}）
}
render（）{
var time=格式（this.state.time）；
返回
}
}
导出默认时间显示；

如果您有两个组件，则将按钮保留在一个组件中，然后导入到第二个组件中，并将handleTimer函数作为道具传递给下面的组件，我将给出示例

    import React, {Component} from "react";
    import format from './formatTime';

    class ButtonAction extends Component {
        constructor(props) {
            super(props);
            this.state = {
                time: 0,
                on: false,
            }
        }

        handleTimer=()=>{
          this.props.handleTimer();
        }

        render() {
            var time = format(this.state.time);
            return <div>
                <div className="controls">
                    <button onClick={this.handleTimer}>Run</button>
                </div>
                <h1 className="display-time">{time}</h1>
            </div>
        }
    }

    export default ButtonAction ;

import React，{Component}来自“React”；
从“/formatTime”导入格式；
类按钮操作扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间:0,，
关于：错，
}
}
handleTimer=（）=>{
this.props.handleTimer（）；
}
render（）{
var time=格式（this.state.time）；
返回
跑
{time}
}
}
导出默认按钮操作；

在TimeDisplay组件中导入新组件

import NewComponent from "./ButtonAction ";
import React, {Component} from "react";
import format from './formatTime';

    class TimeDisplay extends Component {
        constructor(props) {
            super(props);
            this.state = {
                time: 0,
                on: false,
            }
        }

        handleTimer = () => {
            if (this.state.on) {
                clearInterval(this.timer);
            } else {
                this.timer = setInterval(() => {
                    this.setState({time: ++this.state.time})
                    console.log("timer running");
                }, 10)
            }
            this.setState({on: !this.state.on})
        }

        render() {
            var time = format(this.state.time);
            return <div>
                <NewComponent handleTimer ={this.handleTimer}  /> 
            </div>
        }
    }

    export default TimeDisplay;

从“/ButtonAction”导入新组件；
从“React”导入React，{Component}；
从“/formatTime”导入格式；
类TimeDisplay扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时间:0,，
关于：错，
}
}
handleTimer=（）=>{
if（this.state.on）{
clearInterval（这个计时器）；
}否则{
this.timer=setInterval（（）=>{
this.setState（{time:++this.state.time}）
日志（“计时器运行”）；
}, 10)
}
this.setState（{on:！this.state.on}）
}
render（）{
var time=格式（this.state.time）；
返回
}
}
导出默认时间显示；

您必须将另一个组件用作TimeDisplay的子组件，并将该函数作为道具传递。在

TimeDisplay

do

中，如果其他组件与TimeDisplay位于同一树中，则需要将函数作为道具传递。如果另一个组件不在同一个树中，您需要将状态提升到一个共同的祖先，或者通过状态管理器工具（例如redux）共享该功能。基本上，您可以重用该组件并执行

，您必须将另一个组件用作TimeDisplay的子组件，并将该功能作为道具传递。在

TimeDisplay

do

中，如果其他组件与TimeDisplay位于同一树中，则需要将函数作为道具传递。如果另一个组件不在同一个树中，您需要将状态提升到一个共同的祖先，或者通过状态管理器工具（例如redux）共享该功能，您基本上可以重用该组件并执行