Reactjs 如何进行跨组件调用？_Reactjs

Reactjs 如何进行跨组件调用？

reactjs

Reactjs 如何进行跨组件调用？,reactjs,Reactjs,我在两个单独的jsx文件中有以下两个组件 1。在Component1.jsx上： var Comp1 = React.createClass({ componentDidMount: function() { this.comp1Fn(); }, comp1Fn: function() { console.log('Component 1 created');

我在两个单独的jsx文件中有以下两个组件

1。在
Component1.jsx上
：

    var Comp1 = React.createClass({
          componentDidMount: function() {
            this.comp1Fn();
          },
          comp1Fn: function() {
            console.log('Component 1 created');
            test1();
          },
          render: function() {
              return ( < div > < input type = "button"
                value = "Componenet 1" / > < /div>)
        }
    })

    function test1(){
        console.log('called test1');
    }


    var c1= ReactDOM.render(<Comp1 / > ,
                document.getElementById('div1'));

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
</head>
<body>   
<div id="div1"></div>
<div id="div2"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel" src="Component1.jsx"></script>
<script type="text/babel" src="Component2.jsx"></script>

</body>
</html>

这里是它的HTML:

    var Comp1 = React.createClass({
          componentDidMount: function() {
            this.comp1Fn();
          },
          comp1Fn: function() {
            console.log('Component 1 created');
            test1();
          },
          render: function() {
              return ( < div > < input type = "button"
                value = "Componenet 1" / > < /div>)
        }
    })

    function test1(){
        console.log('called test1');
    }


    var c1= ReactDOM.render(<Comp1 / > ,
                document.getElementById('div1'));

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
</head>
<body>   
<div id="div1"></div>
<div id="div2"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel" src="Component1.jsx"></script>
<script type="text/babel" src="Component2.jsx"></script>

</body>
</html>

在Comp2的

comp2Fn（）

中，它调用

c1.comp1Fn（）

。但它给出了以下错误：

未捕获引用错误：未定义c1 在Constructor.comp2Fn处（在n.run处求值（browser.min.js:3），：12:9）在Constructor.componentDidMount（eval at n.run（browser.min.js:3），：8:14）在CallbackQueue.notifyAll（react.js:839）在ReactReconcietTransaction.close（react.js:12909）处在ReactReconficateTransaction.closeAll（react.js:16039）在ReactReconcietTransaction.perform（react.js:15986）在BatchedMountComponentNode（react.js:11190）在ReactDefaultBatchingStrategyTransaction.perform（react.js:15973）在Object.batchedUpdate上（react.js:9229）在Object.batchedUpdate（react.js:13702）

为什么我无法访问

Comp1

的函数

comp1Fn（）

如何从Comp2调用

comp1Fn（）

如果要在Comp2中访问Comp1，只需导出Comp1并导入到Comp2即可

比如说

export default Comp1
// Then import to Comp2
import Comp1 from 'your/path/to/Comp1

然后，您可以在Comp2中访问Comp1

如果您想在Comp2中访问Comp1，只需导出Comp1并导入Comp2即可

比如说

export default Comp1
// Then import to Comp2
import Comp1 from 'your/path/to/Comp1

然后，当我放置这些行时，您可以访问Comp2中的Comp1，我得到以下错误：Uncaught ReferenceError:exports没有在eval（eval在n.run（browser.min.js:3）中定义，在Function.n.run（browser.min.js:3）在l（browser.min.js:3）在browser.min.js:3在XMLHttpRequest.s.onreadystatechange（browser.min.js:3）中定义当我放置这些行时，我得到以下错误：uncaughtreferenceerror:exports没有在eval（eval在n.run（browser.min.js:3）在Function.n.run（browser.min.js:3）在l（browser.min.js:3）在browser.min.js:3在XMLHttpRequest.s.onreadystatechange（browser.min.js:3）中定义