Как отделить часть JSX от функции рендеринга

Question

Как отделить часть JSX от функции рендеринга

0

Все:

Я новичок в React.js и просто использую немного AngularJS, есть один вопрос о React.js:

В AngularJS часть HTML обычно отделяется от JS-кода в качестве шаблона, мне нравится этот способ, который делает код чистым, интересно , есть ли аналогичный способ, который я могу сделать в React, или просто использовать функцию для применения this.state/this.props для части HTML?

благодаря

Kuan 08 дек. 2015, в 00:39

Источник

0

Если вы структурируете большинство своих компонентов так, что они не сохраняют состояния, это в основном просто JSX и подпорки. facebook.github.io/react/blog/2015/09/10/...
Dylan 07 дек. 2015, в 23:41
0

И если вы действительно хотите отделить JSX, это просто javascript, так что вы всегда можете поместить это в отдельный файл и импортировать в компонент. Не уверен, что это будет чище, хотя.
Dylan 07 дек. 2015, в 23:42
2

Я думаю, что вы в корне не согласны с React, если ваша цель - отделить содержимое функции render от границ функции render .
Kyeotic 07 дек. 2015, в 23:42

Показать ещё 1 комментарий

Теги:

javascript

reactjs

angularjs

1 ответ

Ещё вопросы

Если вы структурируете большинство своих компонентов так, что они не сохраняют состояния, это в основном просто JSX и подпорки. facebook.github.io/react/blog/2015/09/10/...
И если вы действительно хотите отделить JSX, это просто javascript, так что вы всегда можете поместить это в отдельный файл и импортировать в компонент. Не уверен, что это будет чище, хотя.
Я думаю, что вы в корне не согласны с React, если ваша цель - отделить содержимое функции render от границ функции render .

Tyrsius · Accepted Answer · 2015-12-08T01-34-00.000Z

Функция render - это просто синхронная функция. Пока шаблон уже загружен чем-то, вы можете это сделать абсолютно.

//Some module that has loaded the HTML
import jsxStore from 'jsxStore';

class SillyComponent extends React.Component {
    render() {
        return jsxStore.getSillyComponent(this.props, this.state);
    }
}

Задача здесь заключается в обеспечении того, чтобы HTML был загружен ко времени выполнения этого вызова, поскольку render не принимает асинхронные результаты. HTML должен быть загружен, прежде чем компонент попытается что-либо сделать.

Следует отметить, что вы боретесь с Реатом, делая это. Идея React для компонента - это автономный пакет кода и представления. Цель состоит в том, чтобы сохранить компонент в одном файле, чтобы вы могли сразу увидеть все это. Это отличается от рамок, таких как Угловое преднамеренно. Если вам это не нравится, React не подходит для вас.

Спасибо, в настоящее время я занимаюсь визуализацией данных, которая требует большого количества манипуляций с DOM (создание сложной структуры DOM с огромным количеством стилей), я думал, что концепция компонента из React поможет, но когда это станет реальностью, этого действительно сложно достичь.
Я не думаю, что есть что-то о визуализации данных и множестве манипуляций с DOM, что противоречит React. Вам придется адаптировать свое мышление, потому что React сильно отличается от Angular. Если вы попытаетесь использовать React так же, как вы используете Angular, у вас будет плохое время. Даже вещи, к которым хорошо подходит React, будут трудными, если вы попытаетесь использовать их как Angular.
спасибо, знаете ли вы, если какая-либо библиотека может выполнять операции virtualDOM, как в jQuery css (), append () etcs?
@ Куан - использование такого типа функциональности предполагает, что вы не «думаете React». Попробуйте написать прототип, который полностью охватывает шаблоны React, а не пытаться смешивать другие стили платформы и фреймворка. React может подходить (или нет) вашим потребностям и личным предпочтениям.
@Kuan Когда вы говорите css() и append() , я вижу style React и просто обычное объявление JSX. render вызывается всякий раз, когда props или state обновляются, поэтому, пока render правильно описывает представление, все обновления, такие как вновь добавленный дочерний элемент или обновленный стиль, будут выполняться автоматически. Если у вас есть конкретный вариант использования, я могу сделать его для вас.