如何让 JavaScript 在 React 组件中工作

How to get javascript to work in React component

本文关键字：组件 工作 React JavaScript      更新时间：2023-09-26

所以我似乎无法在我的一个组件类的render()中编译我内心最深的javascript。我的语法是错误的，还是我们不允许在render()中使用Javascript返回带有更多Javascript的HTML？

我的错误是 SearchBarAndResults.jsx：意外令牌 （57：12）

  render() {
    let recievedContracts = this.props.passedContracts.recievedContracts;
    if (!recievedContracts) {
      return (
        <div>
          <h3>'Still waiting for JSON Response'</h3>
        </div>
      );
    } else {       
      const allMemberContractsInfo = this.props.passedContracts.allMemberContractsInfo;
      return (
        <div>
          <h3>'allMemberContractsInfo Have Arrived on the Client Side!'</h3>
          <Button>
            <a href='http://www.adnxs.net/' target="_blank">New Bidder</a>
          </Button>
          {
            if (2 === (3 -1)) { // <============= line 57
              return (<h1>1 does equal 1</h1>);
            } else {
              return (<h1>1 does not equal 1</h1>);
            }
          }
          // other code...

只能在 JSX 中嵌入表达式，而不能嵌入语句（如 if ）。

您可以执行以下操作之一：

{
  2 === (3 - 1) ?
  <h1>1 does equal 1</h1> :
  <h1>1 does not equal 1</h1>
}
{function () {
  if (2 === (3 - 1)) {
    return (<h1>1 does equal 1</h1>);
  } else {
    return (<h1>1 does not equal 1</h1>);
  }
}()}

您应该将语句重写为表达式，以便在 JSX 中使用它。

{
  2 === (3 -1)
  ? <h1>1 does equal 1</h1>
  : <h1>1 does not equal 1</h1>;
}
相关文章：