javascript - 如何在导入的.map()react.js中使用onClick

好的，所以我有两个文件Test.js和Test2.js

Test.js：

import React from 'react';

const hello = ['hello', 'hi', 'sup'];

export const helloWorld = hello.map(helloCode => {
  return (
    <button onClick={this.handleClick}>{helloCode}</button>
  );
});

Test2.js：

import React from 'react';
import { helloWorld } from './Test';

export class RealTest extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('clicked');
  }

  render() {

    return (
      <div>
           {helloWorld}
      </div>
    );
  }
};

我不知道如何获取helloWorld来访问onClick函数，我尝试创建一个道具，尝试绑定它，但是除非它在Test2.js中，否则我无法使其工作，但是我需要它来在它自己的单独文件中。谢谢您的帮助。

最佳答案

@Adam建议传递上下文，但我认为它更像是React来传递道具。

export const HelloWorld = props => hello.map(helloCode => {
  return (
    <button
      key={helloCode} // <--- make sure to add a unique key
      onClick={props.handleClick}
    >
      {helloCode}
    </button>
  );
});

然后渲染：

 <div>
    <HelloWorld handleClick={this.handleClick} />
 </div>