Question

好的，我有两个文件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，但我需要它在它自己的单独文件中。谢谢你的帮助。

Answer 1

@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>

Answer 2

通过变量helloWorld访问的JSX数组不知道你想要的上下文（例如this）在它自己的文件中的时候（因此，{{ 1}}无法使用。）

最简单的方法是使它成为一个函数，以便您可以传递正确的上下文：

this.handleClick

然后在你的render方法中传入上下文：

import React from 'react';

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

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

Answer 3

const hello = ['hello', 'hi', 'sup'];

const HelloWorld = (props) => <div>{hello.map(name =>(<button onClick={() => props.handleClick(name)}>{name}</button>))}</div>


class RealTest extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(name) {
    console.log('clicked for name ', name);
  }

  render() {

    return (
      <div>
           <HelloWorld handleClick={this.handleClick} />
      </div>
    );
  }
};

ReactDOM.render(
  <RealTest/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如何在导入的.map（）react.js中使用onClick

3 个答案: