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

Question

I am not using React . I am using Stenciljs .

I have the following .tsx file:

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

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

I want to do this instead:

import myTemplate from '../my-template.??';

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

  render() {
    return (myTemplate);
  }
}

with ../my-template.?? containing:

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

Is it possible and how ? Thanks in advance for any help :)

Answer 1

Yes, you can absolutely do this, there are just a couple of things you need to tidy up:

Main file

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

Template

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

Okay, so that's going to get you a message output which is from your template. However, you were asking about passing a message to that template for it to output. That's totally easy as well - you just need to get some props in there. Here is the modified version of the above:

Main file

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

Template

import React from 'react';

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

That's how you pass data around in React - hope that helps!