Question

我想知道是否可以在我从另一个文件导入的组件上调用方法。基本上，我的情况是我有两个反应类。其中一个是数独谜题，我称之为游戏，其中包含updateArray（）方法：

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {arr: [[5,0,4,9,0,0,0,0,2],
                          [9,0,0,0,0,2,8,0,0],
                          [0,0,6,7,0,0,0,0,9],
                          [0,0,5,0,0,6,0,0,3],
                          [3,0,0,0,7,0,0,0,1],
                          [4,0,0,1,0,0,9,0,0],
                          [2,0,0,0,0,9,7,0,0],
                          [0,0,8,4,0,0,0,0,6],
                          [6,0,0,0,0,3,4,0,8]]};

        this.handleSubmit = this.handleSubmit.bind(this);
        this.updateArray = this.updateArray.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.arr != this.props.arr){
            this.setState({arr: nextProps.value });
        }  
    }

    updateArray(str_arr) {
        this.setState({arr: str_arr});
    }

    handleSubmit(event) {

        ...

        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div className = "game">
                    <div className = "game-board">
                        <Board value = {this.state.arr} />
                    </div>
                    <div className = "game-info">
                        <div></div>
                    </div>
                </div>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default Game;

然后我有第二个类获取数独谜题的图像，并使用计算机视觉方法制作相应的9x9数组。然后我尝试使用updateArray函数将数组发送回Game：

import Game from './Sudoku';


export default class ImageInput extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
             uploadedFile: ''
        };

    }

    onImageDrop(files) {
        this.setState({uploadedFile: files[0]});
        this.handleImageUpload(files[0]);
    }

    handleImageUpload(file) {
        var upload = request.post('/')
                            .field('file', file)

        upload.end((err, response) => {
            if (err) {
              console.error(err);
            }
            else {
                console.log(response);
                console.log(Game);
                //ERROR HAPPENING HERE 
                Game.updateArray(response.text);

            }
        });
    }

    render() {
        return (
            <div>
            <Dropzone
                multiple = {false}
                accept = "image/jpg, image/png"
                onDrop={this.onImageDrop.bind(this)}>
            <p>Drop an image or click to select file to upload</p>
            </Dropzone>
        );
    }
}

但是，当我尝试将数组发送到Game的方法时，我得到一个未捕获的TypeError：

Uncaught TypeError: _Sudoku2.default.updateArray is not a function
    at eval (image_input.js?8ad4:43)
    at Request.callback (client.js?8e7e:609)
    at Request.eval (client.js?8e7e:436)
    at Request.Emitter.emit (index.js?5abe:133)
    at XMLHttpRequest.xhr.onreadystatechange (client.js?8e7e:703)

我希望updateArray（）方法从单独的文件更新游戏，然后重新渲染游戏。这可能吗？我花了很多时间阅读文档，似乎我所建议的并不是典型的反应工作流程。它是危险的，如果是的话，有人可以解释为什么吗？

此外，这两个类都在一个单独的文件中呈现，如下所示：

import Game from './Sudoku';
import ImageUpload from './image_input';


document.addEventListener('DOMContentLoaded', function() {
    ReactDOM.render(
        React.createElement(ImageUpload),
        document.getElementById('image-upload'),
    );
    ReactDOM.render(
        React.createElement(Game),
        document.getElementById('sudoku_game'),
    );
});

Answer 1

首先，在您的单独文件中（同时呈现Game和ImageInput组件）：

使其仅渲染一个组件。例如，这可能有一个原始名称，如App。像这样：

import App from './App';

document.addEventListener('DOMContentLoaded', function() {
    ReactDOM.render(
        React.createElement(App),
        document.getElementById('root'),
    );
});

当然，您只需要根据需要更改根元素的导入和名称。

然后，对于App组件：

import React from 'react';
import Game from './Sudoku';
import ImageUpload from './image_input';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      sudokuArray = [];  
    }
  }

  updateArray(newArray) {
    this.setState({sudokuArray: newArray})
  }

  render() {
    <div>
      <Game sudokuArray={this.state.sudokuArray} />
      <ImageUpload  updateArray={this.updateArray.bind(this)} />
    </div>
  }
}

export default App;

在ImageInput组件中，您可以调用更新方法，如： this.props.updateArray(response.text)。

此外，在Game组件内，更改渲染功能，特别是具有Board组件的部件：<Board value = {this.props.sudokuArray} />。

当您学习React时，这是一种相当常见的情况。你发现自己试图传递一些道具或在一个不在＆＃34;下面的组件中运行一些方法。您当前使用的组件。在这些情况下，您想传递的道具或您想要运行的方法可能属于父组件。这是我在回答中提出的建议。您也可以将Game作为ImageInput的孩子，反之亦然。

响应

1 个答案: