Javascript 如何将JSX导入.tsx文件（不在React中）？

我没有使用React。 我正在使用模具js

我有以下.tsx文件：

export class MyComponent {
  @Prop() message: string;

  render() {
    return (<div>{this.message}</div>);
  }
}

带有

。/我的模板。？

包含：

<div>{this.message}</div>

{this.message}

---

有可能吗？怎么可能？提前感谢您的帮助：）

是的，您完全可以做到这一点，您只需要整理几件事情：

主文件

import { Template } from '../template'; // No need for file extension but we're using a named export so we need the curly braces around 'Template'

export class MyComponent {
  @Prop() message: string;

  render() {
    return ( // You don't technically need the parentheses here as you're just returning one thing
      <Template /> // When outputting an imported component, it goes in angle brackets and the backslash closes it like an HTML element
    )
  }
}

import React from 'react';  // template needs React

export const Template = () => { // defining the export in this way is known as a named export
  return (
    <p>A message here</p>
  )
}

import { Template } from '../template';

export class MyComponent {
  @Prop() message: string;

  render() {
    return (           
      <Template messageToOutput={message} /> // The first argument is the name of the prop, the second is the variable you defined above
    )
  }
}

import React from 'react';

export const Template = (props) => { // props are received here
  return (
    <p>{props.messageToOutput}</p> // props are used here
  )
}

从“../Template”；/”导入{Template}不需要文件扩展名，但我们使用的是命名导出，因此需要在“模板”周围使用大括号
导出类MyComponent{
@Prop（）消息：字符串；
render（）{
return（//从技术上讲，这里不需要括号，因为您只返回一件事
//当输出导入的组件时，它放在尖括号中，反斜杠像HTML元素一样将其关闭
)
}
}

模板

import { Template } from '../template'; // No need for file extension but we're using a named export so we need the curly braces around 'Template'

export class MyComponent {
  @Prop() message: string;

  render() {
    return ( // You don't technically need the parentheses here as you're just returning one thing
      <Template /> // When outputting an imported component, it goes in angle brackets and the backslash closes it like an HTML element
    )
  }
}

import React from 'react';  // template needs React

export const Template = () => { // defining the export in this way is known as a named export
  return (
    <p>A message here</p>
  )
}

import { Template } from '../template';

export class MyComponent {
  @Prop() message: string;

  render() {
    return (           
      <Template messageToOutput={message} /> // The first argument is the name of the prop, the second is the variable you defined above
    )
  }
}

import React from 'react';

export const Template = (props) => { // props are received here
  return (
    <p>{props.messageToOutput}</p> // props are used here
  )
}

从“React”导入React；//模板需要作出反应
export const Template=（）=>{//以这种方式定义导出称为命名导出
返回(
这里有消息

)
}

好的，这将得到一个来自模板的消息输出。但是，您要求将消息传递给该模板，以便其输出。这也很容易——你只需要在里面放些道具就行了。以下是上述文件的修改版本：

主文件

import { Template } from '../template'; // No need for file extension but we're using a named export so we need the curly braces around 'Template'

export class MyComponent {
  @Prop() message: string;

  render() {
    return ( // You don't technically need the parentheses here as you're just returning one thing
      <Template /> // When outputting an imported component, it goes in angle brackets and the backslash closes it like an HTML element
    )
  }
}

import React from 'react';  // template needs React

export const Template = () => { // defining the export in this way is known as a named export
  return (
    <p>A message here</p>
  )
}

import { Template } from '../template';

export class MyComponent {
  @Prop() message: string;

  render() {
    return (           
      <Template messageToOutput={message} /> // The first argument is the name of the prop, the second is the variable you defined above
    )
  }
}

import React from 'react';

export const Template = (props) => { // props are received here
  return (
    <p>{props.messageToOutput}</p> // props are used here
  )
}

从“../Template”导入{Template}；
导出类MyComponent{
@Prop（）消息：字符串；
render（）{
报税表（
//第一个参数是prop的名称，第二个参数是上面定义的变量
)
}
}

模板

import { Template } from '../template'; // No need for file extension but we're using a named export so we need the curly braces around 'Template'

export class MyComponent {
  @Prop() message: string;

  render() {
    return ( // You don't technically need the parentheses here as you're just returning one thing
      <Template /> // When outputting an imported component, it goes in angle brackets and the backslash closes it like an HTML element
    )
  }
}

import React from 'react';  // template needs React

export const Template = () => { // defining the export in this way is known as a named export
  return (
    <p>A message here</p>
  )
}

import { Template } from '../template';

export class MyComponent {
  @Prop() message: string;

  render() {
    return (           
      <Template messageToOutput={message} /> // The first argument is the name of the prop, the second is the variable you defined above
    )
  }
}

import React from 'react';

export const Template = (props) => { // props are received here
  return (
    <p>{props.messageToOutput}</p> // props are used here
  )
}

从“React”导入React；
导出常量模板=（道具）=>{//props在此处接收
返回(
{props.messageToOutput}
//这里使用的是props
)
}

---

这就是您在React中传递数据的方式-希望能有所帮助

谢谢你的回答，但这意味着我在一个反应的背景下。我不是。我使用了一个名为Stencil.js的库，我的印象是jsx不是“链接”到React，而是到Typescript？我真的需要React吗？对于模具项目，您只需删除

导入React

行，它就可以工作了。哦，哇，真的吗？好的，我试试看，然后再打给你谢谢！