Question

如何从外部声明的函数调用组件函数？这是代码

function testFunction(){
    test();
}

class ChatManager extends Component{

    test(){
        console.log("Test");
    }

    render(){

        return(
            <div className="divChatManager" onClick={()=>testFunction()}>

            </div>
        )
    }
}

如何从外部声明的函数调用组件函数？这是代码

function testFunction(){
    test();
}

class ChatManager extends Component{

    test(){
        console.log("Test");
    }

    render(){

        return(
            <div className="divChatManager" onClick={()=>testFunction()}>

            </div>
        )
    }
}

EDITED2

这是我想要实现的目标，但是由于pushToDetail位于ChatManager.js内部而无法正常工作

错误：尝试导入错误：“ pushToDetail”未从“ ./components/ChatManager”导出。

Api.js

import openSocket from 'socket.io-client';
import axios from 'axios';
import { store } from './components/Store'
import { pushToDetail } from './components/ChatManager'

const socket = openSocket("http://localhost:3000/", 
    {'forceNew': true,
    'reconnection': true,
    'reconnectionDelay': 1000,
    'reconnectionDelayMax': 5000,
    'reconnectionAttempts': 999999,
    });

function connectToChatRoom(receiver_id){
    socket.on(receiver_id, (from_id, message)=>{
        console.log(receiver_id + " has received " + message + " from " + from_id);
        pushToDetail(message) // I want to send the message from here to ChatManager.js
    });
}

ChatManager.js

import ChatManagerStyle from '../styles/ChatManagerStyle.scss';
import axios from 'axios';
import { store } from './Store'
import ChatItem from './ChatItem';
import ChatDetailItem from './ChatDetailItem';
import { connectToChatRoom, disconnectFromChatRoom, socket } from '../Api';

class ChatManager extends Component{

    state = {
        chatItem: [],
        chatDetail: [],
    }

    constructor(props){
        super(props);
    };

    pushToDetail = (message) => {
        this.setState({ chatDetail:[...this.state.chatDetail, message] });
    }

}

export { ChatManager, pushToDetail };

Answer 1

我至少可以想到两种方式来实现您的预期行为，但我均不建议这样做。第一个方法是将test作为静态方法添加到类本身：

function testFunction(){
    ChatManager.test(); // Chatmanager itself is an object
}

class ChatManager extends Component{

    static test(){ // set test as static function
        console.log("Test");
    }
}

通过使用bind（）方法将test（）函数分配给实例的第二种方法：

function testFunction(){
    this.test(); // call test function on an instance
}

class ChatManager extends Component{

    test(){
        console.log("Test");
    }

    render(){

        return(
            <div className="divChatManager" onClick={ testFunction.bind(this) }>

            </div>
        )
    }
}

这两个解决方案都非常笨拙，正如其他人之前提到的那样，您应该问自己的主要问题是，为什么首先要这样做？可能是，有一个问题可以在React的约定中解决，而不使用hacky javascript。

Answer 2

这似乎是您试图结合两个概念。 Component是您的视图逻辑。如果您需要调用组件的方法，请将其标记为static，但实际上不应将视图逻辑与外部业务逻辑混合在一起。这就是实用程序文件夹/文件的用途，甚至是减速器/中间件对。

我认为您真正想要的是在实用程序文件中定义一个辅助函数或工厂，该函数接受需要用来生成输出的任何参数。

Answer 3

如果我没记错的话，最终您将尝试通过消息设置状态。使用reducer功能触发更新状态的动作。

ReactJS如何从同一文件中的另一个函数调用组件函数？

3 个答案: