Có thể kết xuất HTML từ một tệp khác trong thành phần React không?Tôi làm cách nào để hiển thị HTML từ một tệp khác trong thành phần React?
Tôi đã thử những điều sau đây, nhưng nó không hoạt động:
var React = require('react');
/* Template html */
var template = require('./template');
module.exports = React.createClass({
render: function() {
return(
<template/>
);
}
});
Người ta thường có thành phần được chỉ render từ đạo cụ. Như thế này:
class Template extends React.Component{
render(){
return <div>this.props.something</div>
}
}
Sau đó, ở thành phần cấp cao hơn nơi bạn có logic, bạn chỉ cần nhập thành phần Mẫu và chuyển các đạo cụ cần thiết. Tất cả logic của bạn vẫn ở trong thành phần cấp cao hơn và Mẫu chỉ hiển thị. Đây là một cách có thể để đạt được 'mẫu' như trong Angular.
Không có cách nào để có tệp .jsx chỉ với jsx và sử dụng nó trong React vì jsx không thực sự là html nhưng là đánh dấu cho một DOM ảo, mà React quản lý.
Xe tăng cho phản hồi của bạn. Nhưng khi sử dụng trang html lớn, phương thức này sẽ có nhiều dòng khác nhau trong một tệp jsx. Tôi không thể tạo một tệp jsx cho mỗi yêu cầu. –
Không cần phải có tệp jsx cho mỗi dòng/khối. Khi làm việc với React bạn chia ứng dụng thành các thành phần logic dựa trên dữ liệu mà mọi thành phần sử dụng và sử dụng logic này, bạn sắp xếp các thành phần của mình. Ví dụ: bạn có thể có một thành phần tìm nạp dữ liệu người dùng từ máy chủ. Giả sử nó được đặt tên là UsersData. Sau đó, bạn có một thành phần cho người dùng, có tên là UserData. Và cuối cùng, component render một số dữ liệu, ví dụ như Biography. Vì vậy, thứ tự là: UsersData -> UserData -> Tiểu sử. Thành phần tiểu sử có thể có các lĩnh vực như nơi sinh và tuổi. – Ivan
Bạn có thể sử dụng dangerouslySetInnerHTML tài sản để tiêm HTML tùy ý:
// Assume from another require()'ed module:
var html = '<h1>Hello, world!</h1>'
var MyComponent = React.createClass({
render: function() {
return React.createElement("h1", {dangerouslySetInnerHTML: {__html: html}})
}
})
ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'))<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>Bạn thậm chí có thể componentize mẫu hành vi này (chưa được kiểm tra):
class TemplateComponent extends React.Component {
constructor(props) {
super(props)
this.html = require(props.template)
}
render() {
return <div dangerouslySetInnerHTML={{__html: this.html}}/>
}
}
TemplateComponent.propTypes = {
template: React.PropTypes.string.isRequired
}
// use like
<TemplateComponent template='./template.html'/>
Và với điều này, template.html (trong cùng một thư mục) trông giống như (một lần nữa, chưa được kiểm tra):
// ./template.html
module.exports = '<h1>Hello, world!</h1>'
Cảm ơn bạn đã trả lời. Tôi nhận được lỗi này: Lỗi không bắt buộc: Không thể tìm thấy mô-đun 'template.html'. –
Bạn cần cung cấp đường dẫn chính xác cho mẫu của mình. Tôi đã cập nhật câu trả lời của mình để hiển thị nếu 'template.html' nằm trong cùng một thư mục. –
Nếu tệp template.html chỉ là HTML chứ không phải thành phần React, bạn không thể yêu cầu nó giống như cách bạn làm với tệp JS.
Tuy nhiên, nếu bạn đang sử dụng Browserify - có một biến đổi được gọi là stringify sẽ cho phép bạn yêu cầu tệp không phải là js dưới dạng chuỗi. Khi bạn đã thêm biến đổi, bạn sẽ có thể yêu cầu tệp HTML và chúng sẽ xuất như thể chúng chỉ là chuỗi.
Khi bạn đã yêu cầu tệp HTML, bạn sẽ phải tiêm chuỗi HTML vào thành phần của mình, sử dụng dangerouslySetInnerHTML prop.
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});
Điều này đi ngược lại với những gì React nói đến. Sẽ là tự nhiên hơn khi tạo các mẫu của bạn dưới dạng các thành phần React với JSX, chứ không phải là các tệp HTML thông thường.
Cú pháp JSX giúp dễ dàng thể hiện dữ liệu có cấu trúc, như HTML, đặc biệt khi bạn sử dụng stateless function components.
Nếu tập tin template.html bạn nhìn một cái gì đó như thế này
<div class='foo'>
<h1>Hello</h1>
<p>Some paragraph text</p>
<button>Click</button>
</div>
Sau đó, bạn có thể chuyển đổi nó thay vì vào một tập tin JSX trông như thế này.
module.exports = function(props) {
return (
<div className='foo'>
<h1>Hello</h1>
<p>Some paragraph text</p>
<button>Click</button>
</div>
);
};
Sau đó, bạn có thể yêu cầu và sử dụng nó mà không cần phải xâu chuỗi.
var Template = require('./template');
module.exports = React.createClass({
render: function() {
var bar = 'baz';
return(
<Template foo={bar}/>
);
}
});
Nó duy trì tất cả cấu trúc của tệp gốc và cho phép kiểm tra cú pháp thời gian biên dịch, không giống như tệp HTML thông thường.
Các tác phẩm của nó, nhưng không hoạt động với material-ui. Tệp html của tôi chứa TextField và không hiển thị –
Rất tiếc, tôi không theo dõi. Bạn đã thử phương pháp nào? Có lỗi không? Có thể sẽ rất hữu ích khi đưa tệp html của bạn vào câu hỏi của bạn. –
Bạn có thể làm điều đó nếu mẫu là một thành phần phản ứng.
Template.js
var React = require('react');
var Template = React.createClass({
render: function(){
return (<div>Mi HTML</div>);
}
});
module.exports = Template;
MainComponent.js
var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require("react-tap-event-plugin");
var Template = require('./Template');
//Needed for React Developer Tools
window.React = React;
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
var MainComponent = React.createClass({
render: function() {
return(
<Template/>
);
}
});
// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(
<MainComponent />,
document.getElementById('app')
);
Và nếu bạn đang sử dụng Vật liệu-UI, để sử dụng khả năng tương thích Material-UI Components, không có đầu vào bình thường.
Bạn phải sử dụng chữ hoa cho các thành phần tùy chỉnh, vì vậy hãy đổi tên 'mẫu' thành' Mẫu' và sau đó trả về '' – Icepickle
Tôi giả sử rằng khi bạn nói "HTML", bạn thực sự có nghĩa là JSX? –
@Icepickle tôi nhận được lỗi này: Lỗi bắt buộc: Không thể tìm thấy mô-đun "./template" –