Попытка понять лучший способ отправки html, css, js файлов обратно клиенту через запрос Post. Я использую экспресс, реагирую.
Пока у меня есть базовый пост-маршрут, который возвращает скомпилированный компонент с данными (используя руль) в качестве ответа. Однако обработчики событий, css и js отсутствуют. Я не уверен, как обслуживать их вместе с HTML в качестве ответа на запрос AJAX POST в другом домене.
Я использую webpack для SSR и подумал, что это будет работать примерно так же, но это не такт.
Вот то, что у меня есть до сих пор ... это просто возвращает HTML из моего компонента реакции.
app.post("/", async (req, res) => {
const theHtml = `
<html>
<head><title>My First SSR</title>
<link href='http://localhost:8080/app.css'></link>
<script src="http://localhost:8080/app.js" charset="utf-8"></script>
<script src="http://localhost:8080/vendor.js" charset="utf-8"></script>
</head>
<body>
<h1>My First Server Side Render</h1>
<div id="reactele">{{{reactele}}}</div>
</body>
</html>
`;
const hbsTemplate = hbs.compile(theHtml);
const reactComp = renderToString(<App />);
const htmlToSend = hbsTemplate({ reactele: reactComp });
res.send(htmlToSend);
});
Вышеприведенное работает и возвращается только без js, обработчиков событий css и т. Д. Вот компонент приложения
class App extends React.Component {
constructor() {
super();
this.handleButtonClick = this.handleButtonClick.bind(this);
this.handleTextChange = this.handleTextChange.bind(this);
this.handleReset = this.handleReset.bind(this);
this.state = {
name: "",
msg: ""
};
}
//Handlers
handleButtonClick = e => {
const nameLen = this.state.name.length;
if (nameLen > 0) {
this.setState({
msg: `You name has ${nameLen} characters including space`
});
}
};
handleTextChange = e => {
this.setState({ name: e.target.value });
};
handleReset = () => {
this.setState({ name: "", msg: "" });
};
//End Handlers
render() {
let msg;
if (this.state.msg !== "") {
msg = <p>{this.state.msg}</p>;
} else {
msg = "I have a state of none";
}
return (
//do something here where there is a button that will replace the text
<div>
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" /> */}
{/* <img src={logo} className="App-logo" alt="logo" /> */}
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<label>Your name </label>
<input
type="text"
id="txtName"
name="txtName"
value={this.state.name}
onChange={this.handleTextChange}
/>
<button id="btnSubmit" onClick={this.handleButtonClick}>
Calculate Name Length
</button>
<button id="btnReset" onClick={this.handleReset}>
Reset All
</button>
<hr />
{msg}
</div>
);
}
}
export default App;
На стороне клиента я просто добавляю htmlна пустую страницу. Несколько вопросов,
Как мне поддерживать обработчики событий в запрошенном html? Как также отправлять .css и .js вместе?
В некоторых случаях я бы хотел избежать необходимости размещать и поддерживать код «client» на моем интерфейсном сервере? Я надеюсь, что что-то вроде веб-пакета поможет мне?
Спасибо за любые советы / предложения.
РЕДАКТИРОВАТЬ :: Чтобы уточнить это работает, если я получаю доступ к маршруту напрямую. Я получаю корреляции JS и CSS. Просто не через почтовый запрос с другого домена. Я предполагаю, что упускаю некоторые фундаментальные знания о том, как поддерживается dom и выполняются сценарии.