Question

我不使用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>

有可能吗？如何？预先感谢您的帮助：）

Answer 1

是的，您绝对可以做到这一点，您需要整理几件事：

主文件

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

模板

public HttpResponseMessage FileUpload() { System.Web.HttpRequest httpRequest = System.Web.HttpContext.Current.Request; System.Collections.Specialized.NameValueCollection formData = httpRequest.Form; int ID = Convert.ToInt32(formData["ID"]); etc

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

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

1 个答案: