Question

所有

我对React和JSX很新，当我尝试它时：

render(){
    return (
        {
            (function(){
                return <div>Hello, world</div>
            })()
        }
    )       
}

它给我一个错误：

Syntax error: C:/Temp/web/path/src/line.js: Unexpected token (26:4)

  24 |      return (
  25 |          {
> 26 |              (function(){
     |              ^
  27 |                                  return <div>Hello, world</div>
  28 |                              })()
  29 |          }

@ ./src/App.js 16：12-29

但是在我将此函数包装到<div>标记后，它可以正常工作，我认为{}用于解释内部的内容，但为什么它必须与<div>标记一起使用？

如何在不包装div

的情况下执行此操作

由于

Answer 1

渲染功能的内部返回应该是您想要输出的内容。

render(){
    return (
        <div>Hello, world</div> 
    );
}

每个渲染函数都需要一个主要的封闭标记。所以：

render(){
    return (
        <div>Hello, world</div> 
        <div>You are great!</div> 
    );
}

不起作用。你需要：

render(){
    return (
      <div>
        <div>Hello, world</div> 
        <div>You are great!</div> 
      </div>
    );
}

另外，当你说{}用于解释放在jsx标记中的内部时，你是正确的，除了它用于简单表达式。如果需要定义函数，请在渲染函数之外进行。

this.name = 'Kuan';

boldName(){
  return (
    <b>{this.name}</b>
  );
}

render(){
    return (
        <div>Hello, world</div> 
        <div>You are {this.boldName()}</div> 
    );
}

或专门针对您的问题：

myRenderFunction(){
    return <div>Hello, world</div>
}

render(){
    return (
        {this.myRenderFunction()}
    )       
}

Answer 2

return (
    {
        (function(){
            return <div>Hello, world</div>
        })()
    }
)

我认为这是基本的语法问题，在{ jsx期望xml structure，如果您需要在渲染中调用该函数，请尝试执行此操作using normal javascript，请尝试此操作

return (
    (function(){
        return <div>Hello, world</div>
    })()
)

对JSX语法感到困惑

2 个答案: