使用来自npm的react组件和reactjs.net

Question

如何将npm的反应组件添加到Startup.cs？

对于their demo that I followed，我目前有：

app.UseReact(config =>
{
    config.AddScript("~/js/helloworld.jsx");
});

这很好。

如果我有一个我通过npm安装的组件，它位于node_modules文件夹中，我如何通过Reactjs.NET引用并将其用于服务器端渲染？

Answer 1

我能够基于reactnet-webpack模板执行此操作。就我而言，我试图包括react-jsonschema-form，但我猜想它应该对所有其他React组件都一样。

1. 安装组件npm install -s @rjsf/core
2. 将您想要使用该组件的.jsx文件导入：import Form from "@rjsf/core";
3. 在现有渲染功能内添加组件：

const schema = {
    title: "Todo",
    type: "object",
    required: ["title"],
    properties: {
        title: { type: "string", title: "Title", default: "A new task" },
        done: { type: "boolean", title: "Done?", default: false }
    }
};
const log = (type) => console.log.bind(console, type);

render() {
    return (                
        <Form schema={schema}
              onChange={log("changed")}
              onSubmit={log("submitted")}
              onError={log("errors")} />
        );
    }
}

1. 使用Webpack重建JS部件：npm run build

2. 在Visual Studio中启动应用程序