Confused о JSX синтаксисе

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> 
    })() 
)