Может ли ReactJS отображать компоненты, хранящиеся в строке JavaScript
Задача:
Наша система возвращает код в разных местах через AJAX / JSON. Я пытаюсь визуализировать компонент ReactJS, который хранится в строке JavaScript.
Желаемым результатом следующего скрипта является отображение <h1>Hello World</h1> как только вызов AJAX возвращает компонент ReactJS.
Пример:
var HelloWorld = React.createClass({
render: function() {
return (
<h1>Hello World!</h1>
)
}
});
var Controller = React.createClass({
getInitialState: function() {
return {mydata: "Hello There!"}
},
componentDidMount: function() {
var self = this;
$.getJSON('ajax_controller.php', function(mydata) {
self.setState({mydata: mydata});
});
},
render: function() {
return (
<div>{this.state.mydata}</div>
)
}
});
Вот ajax_controller.php файл.
echo json_encode(array('<HelloWorld></HelloWorld>'));
exit;
Спасибо за помощь!
Решение
Ваша функция рендеринга в Контроллере пропускает возврат. Я попробовал ваш пример, и он работает, только если значение myData не является строкой.
self.setState({mydata: <HelloWorld></HelloWorld>});
Другие решения
Если есть какая-либо возможность, ваша конечная точка может вернуть только имя компонента, а не JSX, который вы могли бы использовать React.createElement()
Docs: https://facebook.github.io/react/docs/react-api.html#createelement
Пример:
echo json_encode(array('HelloWorld'));
exit;
Код реакции:
var HelloWorld = React.createClass({
render: function() {
return (
<h1>Hello World!</h1>
)
}
});
var Controller = React.createClass({
getInitialState: function() {
return {mydata: ""}
},
componentDidMount: function() {
$.getJSON('ajax_controller.php', function(mydata) {
this.setState({mydata: mydata});
}.bind(this));
},
renderComponent: function(str) {
return React.createElement(str);
},
render: function() {
return (
<div>{this.renderComponent(this.state.mydata)}</div>
)
}
});
(Примечание: Я связан this на ваш запрос AJAX, так что вам не нужно делать var self = this; линия. Личное предпочтение.)