Question

我有index.html和react.js，react.dom.js和browser.min.js以及app.jsx。

在app.jsx中有两个类App和一个HelloWorld类。当这两个组件保存在单个文件中时，整个系统就可以工作但是当我在每个文件中定义App和HelloWorld时，此操作将无效。

我在reactjs网站上的“添加到任何网站”部分中看到了这段代码

<!-- Index.html -->
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Wizkumar MsgInc </title>
        <script src="../js/react/react.js"></script>
        <script src="../js/react/react-dom.min.js"></script>
        <script src="../js/react/browser.min.js"></script>
    </head>
    <body>
        <div id="App"></div>
        <script type="text/babel" src="../js/react/app.jsx"></script>
    </body>
</html>

//App.jsx
class HelloWorld extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

class App extends React.Component{
    render(){
        return(
            <div>
                i am {HelloWorld}
            </div>
        )
    }
}

ReactDOM.render(<App/>,document.getElementById('App'));

当我将HelloWorld放在另一个文件中，而App放在另一个文件中时，此代码不起作用，因此有没有可能将这些类放在不同的文件和程序中的可行方法。

Answer 1

由于HelloWorld是组件，因此应将其用作组件<HelloWorld />

class App extends React.Component{
    render(){
        return(
            <div>
                i am <HelloWorld />
            </div>
        )
    }
}

如果要在其他文件中使用它，则必须导出组件

Answer 2

让类访问全局范围是我针对此问题找到的解决方案

//helloWorld.jsx
class HelloWorld extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}
var global = window || global;
global.HelloWorld = HelloWorld ;

在这里使用global，我们已经在全球范围内提供了该课程

//app.jsx
class App extends React.Component{
    render(){
        return(
            <div>
                i am {<HelloWorld/>}
            </div>
        )
    }
}

ReactDOM.render(<App/>,document.getElementById('App'));

现在让我们看看index.html

<!-- Index.html -->
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Wizkumar MsgInc </title>
        <script src="../js/react/react.js"></script>
        <script src="../js/react/react-dom.min.js"></script>
        <script src="../js/react/browser.min.js"></script>
    </head>
    <body>
        <div id="App"></div>
        <script type="text/babel" src="../js/react/app.jsx"></script>
        <script type="text/babel" src="../js/react/helloWorld.jsx"></script>
    </body>
</html>

现在这将起作用，因为HelloWorld Component是应用程序组件#global可用的


Question was define these classes of react in each of single file
if in case the application grows large, Solution is put all classes
in each separate files and make them available Globally

#HappyCoding

Answer 3

有一个非常简单的方法。像这样将其他文件放入您的班级：

export default class HelloWorld extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

并在主文件的顶部添加：

import HelloWorld from './myfile'

对组件类使用制动踏板<HelloWorld />

Answer 4

我认为您只是忘了包含第二个文件，例如app.jsx：

<script type="text/babel" src="../js/react/app.jsx"></script>
<script type="text/babel" src="../js/react/HelloWorld.jsx"></script>

顺便说一句：这是使用Webpack生成Signle捆绑包中所有文件的常用方法，并且页面上只需要包含1个文件。

BTW2：在这里您可以检查建议如何以正式的方式启动项目：https://github.com/facebook/create-react-app

Answer 5

导出HelloWorld并导入App.js，如下所示。此外，自定义组件也应使用<>编写，变量应使用{}

编写

HelloWorld.js

export default class HelloWorld extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

App.js

import HelloWorld from 'HelloWorld';

    class App extends React.Component{
        render(){
            return(
                <div>
                    i am <HelloWorld />
                </div>
            )
        }
    }

    ReactDOM.render(<App/>,document.getElementById('App'));

Answer 6

在您的app.jsx文件中，通过

正确导入文件

#include <gif.h>
#include "BOBImageConversion.h"
int main(void)
{
    // USAGE:
    // Create a GifWriter struct. Pass it to GifBegin() to initialize and write the header.
    // Pass subsequent frames to GifWriteFrame().
    // Finally, call GifEnd() to close the file handle and free memory.

    int delay = 100;
    auto i1 = BOBImageIO::BOBLoadImage("Camera7.png");
    auto i2 = BOBImageIO::BOBLoadImage("Camera18.png");

    vector<uint8_t> vi1 = BOBImageConversion::ARGB2RGBAuint8(i1);
    vector<uint8_t> vi2 = BOBImageConversion::ARGB2RGBAuint8(i2);
    cout << (vi1.size() == i1.Width()*i1.Height()) << endl;         // true
    cout << (vi2.size() == i2.Width()*i2.Height()) << endl;         // true

    auto fileName = "gif.gif";
    GifWriter g;
    GifBegin(&g, fileName, i1.Width(), i1.Height(), delay);
    GifWriteFrame(&g, vi1.data(), i1.Width(), i1.Height(), delay);
    GifWriteFrame(&g, vi2.data(), i2.Width(), i2.Height(), delay); // Exception thrown: Access violation reading location 
    GifEnd(&g);

    return 0;
}

然后在名称为HelloWorld.jsx的导出中，您将其导入app.jsx

import HelloWorld from './HelloWorld'

class App extends Component {
  render() {
    return (
      <HelloWorld />
    );
  }
}

有没有办法在单个文件的每个文件中定义这些反应类别

6 个答案:

让类访问全局范围是我针对此问题找到的解决方案