Question

这是我的代码：

generateAlert = () => {
    alert('hi');
}

return <Tile
    click={(index)=>{this.generateAlert}}
    title={tile.title} 
    value={tile.value}
    key={tile.id}
/>

这是我得到的错误：

期望了一个赋值或函数调用，而是看到了一个表达式no-unused-expressions 搜索关键字以详细了解每个错误。

Answer 1

嘿！

如果这是组件onClick函数内部的函数调用，则需要在组件中()之后添加this.generateAlert

因此它将像：

return <Tile
  click={(index)=>{this.generateAlert()}}
  title={tile.title} 
  value={tile.value}
  key={tile.id}
/>

否则，您可以将函数本身用作onClick回调。

在这种情况下，您需要像这样：

return <Tile
  onClick={this.generateAlert}
  title={tile.title} 
  value={tile.value}
  key={tile.id}
/>

干杯！

Answer 2

首先，我确实想知道您的组件中是否有一个Tile数据数组，并且您想为该数组的每个条目渲染一个Tile（我想是因为您添加了{ key支持Tile）。

无论如何，我举了一个与您想要实现的示例类似的示例，并且该示例正在运行。看这个：

const Tile = (props) => {
    return (
        <div className="Tile">
            <h3>{props.title}</h3>
            <div onClick={props.click}>
                {props.value}
            </div>
        </div>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    generateAlert = () => {
        alert("Hi");
    }
    
    render() {
        return (
            <Tile
                click={this.generateAlert}
                title={"This isa a Title"}
                value={"This is the value"} />
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

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

现在，如果您要发布要渲染Tile的Component的代码，我可能会更深入地帮助您。也许有一些错误。

Answer 3

我将以这种方式做

问：为什么要将Tile导出到新组件？

A：由于每个组成部分应尽可能短。这样做有很多好处   例如：“易于发现错误（测试）”。

import React, { Component } from "react";
import Tile from "./Tile";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.generateAlert = this.generateAlert.bind(this);
  }

  generateAlert = () => {
    alert("Hi");
  };

  render() {
    return (
      <Tile
        click={this.generateAlert}
        title={"This isa a Title"}
        value={"This is the value"}
      />
    );
  }
}

export default App;

和文件Tile.js：

import React, { Component } from "react";

export default class Tile extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <button onClick={this.props.click}>click me</button>
        <p>{this.props.title}</p>
        <p>{this.props.value}</p>
      </div>
    );
  }
}

此文件Tile.js已准备就绪，可用于将来的插件，但是如果您现在只想使用它，则建议更改为无状态组件：

import React from "react";

const Tile = props => {
  return (
    <div>
      <button onClick={props.click}>click me</button>
      <p>{props.title}</p>
      <p>{props.value}</p>
    </div>
  );
};

export default Tile;

单击我想在react js方法中生成警报

3 个答案: