用于显示 React 和 react 属性的未终止 JSX 内容答案

【问题标题】：Unterminated JSX contents for displaying React a react Property用于显示 React 和 react 属性的未终止 JSX 内容
【发布时间】：2020-01-10 07:04:20
【问题描述】：

我正在尝试通过反应组件传递一个属性并显示该元素的文本属性我知道 JSX 语法错误，但我得到解析错误：未终止的 JSX 内容。当尝试从属性显示文本但它是空白时好像它没有读取属性

Components.js

import React from "react"

function Components(props) {
    return (<div>
                <h1 style={style}>COMPONENT.js</h1>
                <div>{props.text}</div>
            </div>)

}

export default Components

App.js

import React from 'react';
import Component from "./component"

function App() {
  return (
    <div>
      The Big World
      <Component text="PROPERTY TEXT"/>
    </div>
  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

期望看到要通过Component属性并显示在页面上的属性文本

【问题讨论】：

标签： reactjs

【解决方案1】：

在代码盒中运行所有这些，除了 style 没有被定义之外，它都呈现并运行良好。我也不认为这是您发布的代码中的拼写错误（该文件实际上是components.js 而不是component.js），因为它根本不应该转换，因为它找不到该文件。

【讨论】：

【解决方案2】：

一切看起来都很清楚。尝试在 return 语句的末尾添加分号：

function Components(props) {
    return (
             <div>
                <h1 style={style}>COMPONENT.js</h1>
                <div>{props.text}</div>
             </div>
           );
    }

【讨论】：