通話機能がコンポーネントに反応

Question

私の第一の成分は以下の通りです：

const hellos = ['Hola', 'Salut', 'Hallo', 'Ciao', 'Ahoj', 'Annyeong-haseyo', 'Aloha', 'Howdy', 'Ni Hao', 'Konnichiwa'] 

export class Welcome extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      errors: [] 
     }; 
    } 

    sayHello = function() { 
     return hellos[Math.floor((Math.random()*hellos.length))]; 
    } 

    render() { 
     return (
      <div className="Welcome"> 

      </div> 
     ); 
    } 
} 

私は別のコンポーネントからsayHello()を呼び出すことができるようにしたいです。これまで私が見てきたすべての答えは、親子関係について述べていますが、この場合、2つの要素は関係がありません。私はこのような何かを考えたが、それは仕事をしていません。

import { Welcome } from './Welcome' 

export const Life =() => (
    <div className="Life"> 
     <p>{ Welcome.sayHello() }</p> 
    </div> 
) 

私は人生で印刷hellos配列のランダム要素を取得したいと思います。

Answer 1

あなたがこれを達成できるいくつかの方法があります。

あなたはのsayHello関数を作成し、単に名前の関数としてそれを使用することによってこれを行うことができます。にあり、https://www.webpackbin.com/bins/-KkgrwrMGePG4ixI0EKd

別の方法を作成しまし

import { sayHello } from './hello'; 

class CompA extends React.Component { 
    render() { 
     return <span>{sayHello()}</span>; 
    } 
} 

class CompB extends React.Component { 
    render() { 
     return <span>{sayHello()}</span>; 
    } 
} 

render(<span> 
     <CompA /> 
     <CompB /> 
    </span>, document.querySelector('#app')); 

：インポートすることができます

hello.jsその後

const hellos = ['Hola', 'Salut', 'Hallo', 'Ciao', 'Ahoj', 'Annyeong-haseyo', 'Aloha', 'Howdy', 'Ni Hao', 'Konnichiwa']; 

const sayHello = function() { 
    return hellos[Math.floor((Math.random()*hellos.length))]; 
}; 

export { sayHello }; 

は、これまでコンポーネントそこにあなたは機能を共有したいです単純にsayHello関数をstaticとして定義してください。

static sayHello() { 
    return hellos[Math.floor((Math.random()*hellos.length))]; 
}