Как импортировать JSX в файл .tsx (не в React)? - PullRequest
Новая
       34

Как импортировать JSX в файл .tsx (не в React)?

0 голосов
/ 28 февраля 2019

Я не использую React .Я использую Stenciljs .

У меня есть следующий .tsx файл: 

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

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

Я хочу сделать это вместо: 

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

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

  render() {
    return (myTemplate);
  }
}

с ../my-template.??, содержащим: 

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

Возможно ли это и как?Заранее спасибо за любую помощь:)

1 Ответ

0 голосов
/ 28 февраля 2019

Да, вы можете сделать это абсолютно точно, нужно привести в порядок только пару вещей:

Основной файл 

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 - надеюсь, это поможет!

...