ReactJS如何從同一文件上的另一個函數調用組件函數？

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

這似乎是你想要結合2個概念。 Component是您的視圖邏輯。 如果需要調用組件的方法，請將其標記為static但不應將視圖邏輯與外部業務邏輯混合。 這就是實用程序文件夾/文件的用途，甚至是reducer / middleware對。

我認為你真正想要的是在實用程序文件中定義一個輔助函數或工廠，它接受你需要采取的任何參數來產生輸出。

Answer 3

如果我沒錯，最終你會嘗試使用消息來設置State。 使用reducer函數觸發更新狀態的操作。