Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Usando o JSX com funções

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp

por Maria Caroline Bueno
| 209.3k xp | 187 posts

Boa tarde, estou tentando substituir o innerHTML pela sintaxe JSX, porém ao implementar o código ele me retorna o seguinte erro: 

c.default.createClass is not a function

Qual poderia ser o problema do código? Lembrando que no meu parametro da variavel "el" ele me retorna todo o body. Segue o código

export function render(el, state) {
    var todoItems = [];
    if(state.todos){
        todoItems = Array.prototype.map.call(state.todos, renderTodoItem).join('');
    }

    if(isEnabled('filterDone')){
        const todosDone = state.todos.filter(item => item.done);
        todoItems = Array.prototype.map.call(todosDone, renderTodoItem).join('');
    }

    if(isEnabled('filterNotDone')){
        const todosNotDone = state.todos.filter(item => !item.done);
        todoItems = Array.prototype.map.call(todosNotDone, renderTodoItem).join('');
    }

    el = React.createClass({
        render: function(){
            return renderApp(renderInput(),renderTodos(todoItems))
        }
    });
}
3 respostas
por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Oi Maria, não consegui enxergar o uso do jsx nesse seu trecho de código... só lembrando que o jsx não é algo válido, você precisa do ambiente que compila para javascript válido. Outro detalhe, não parece que realmente vá funcionar usar o innerhtml com o jsx... o código compilado do jsx gera chamada a React.createElements, que não são ainda html de verdade... então não vai adiantar muito você colocar isso no innerHtml.

por Maria Caroline Bueno
| 209.3k xp | 187 posts

Eu tenho um código que usa innerHTMl que está assim:

    el.innerHTML = renderApp(
        renderInput(),
        renderTodos(todoItems),
        renderCheckbox()
    );

Eu instalei o plugin do babel para compilar JSX, o que eu preciso é apenas substituir o innerHTML pela sintaxe JSX como exemplo que dei acima. dentro das funções que são parametros do RenderApp estão o HTML.

solução!
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Maria já acompanho seus problemas a algum tempo, o que você precisa fazer é passar a usar de fato componentes react ao invés de strings de html.

Troque suas strings pelo JSX que é um syntax sugar para o render dos componentes. Depois disso, basta adaptar seu render para usar o render do react.

const app = renderApp(
        renderInput(),
        renderTodos(todoItems),
        renderCheckbox()
    );

    ReactDOM.render(app, el);

Deve resolver!