Визуализировать пользовательский компонент .jsx в $ .ajax -ReactJS-

-2

У меня есть следующее:

export default class FormularioVerRespuestaInforme extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        $.ajax({
            url: APIBASENAME+"/delegado/informes/" + ObtenerParametroURL('id_informe') + "/entradas",
            data: "",
            type: "GET"
            //dataType: "JSON",
        })
        .done((respuesta) => {
            console.log(respuesta);
            $("#idDivContenedorInforme").append(
                <Caja title="f">
                    <textarea disabled id="idContenidoInforme" class="form-control" value="Hola esto es una prueba del informe y sus respuestas" required></textarea>
                </Caja>
            )
            //this.props.history.push('/accion_realizada?estado=${respuesta.estado}&backTwice=true');
        }).fail((xhr, textStatus, errorThrown) => {
            console.log("XHR: ", xhr.responseText);
            //this.props.history.push('/accion_realizada?estado=Incidencia Rechazada');
        })
    }


    render() {
        return (
            <div id="idDivContenedorInforme" class="formularioRespuestasInforme"></div>
        );
    }
}

Где Caja - это настраиваемый компонент, но он не возвращается/не отображается. Я не знаю, как я мог решить эту проблему... Любая идея?

Большое вам спасибо за помощь.

  • 0
    Выполните запрос, затем обновите состояние. позвольте изменению состояния вызвать обновление пользовательского интерфейса.
Теги:

1 ответ

0
Лучший ответ

Чтобы визуализировать этот компонент условно, используйте переменную state, создайте переменную состояния с начальным значением false, как только вы получите обновление ответа, значение которого равно true, используя setState.

Напишите так:

export default class FormularioVerRespuestaInforme extends React.Component {
    constructor() {
        super();
        this.state={
            show: false
        }
    }

    componentDidMount() {
        $.ajax({
            url: APIBASENAME+"/delegado/informes/" + ObtenerParametroURL('id_informe') + "/entradas",
            data: "",
            type: "GET"
            //dataType: "JSON",
        })
        .done((respuesta) => {
            this.setState({show: true});
        }).fail((xhr, textStatus, errorThrown) => {
            console.log("XHR: ", xhr.responseText);
        })
    }


    render() {
        return (
            <div id="idDivContenedorInforme" class="formularioRespuestasInforme">
                {this.state.show?
                    <Caja title="f">
                        <textarea disabled id="idContenidoInforme" class="form-control" value="Hola esto es una prueba del informe y sus respuestas" required></textarea>
                    </Caja>
                :
                    null
                }
            </div>
        );
    }
}

Обновление: Caja является настраиваемым компонентом, поэтому вместо передачи текстового поля, когда дети помещают эту часть внутри компонента Caja, если вы хотите передать некоторые данные (начальные значения), то передайте эти значения только в props.

Использование карты внутри jsx:

class App extends React.Component {

  constructor(){
     super();
  }
  
  render(){
     return(
        <div>
          {
            [1,2,3,4,5].map(el => {
               return <div key={el}> Item: {el} </div>
            })
          }
        </div>
     )
  }

}

ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>
Поделиться
  • 0
    А если бы я добавил более одной «Кахи»? Я мог бы сохранить их в состояние массива правильно? Но как я могу сделать одну 'Caja' для каждого элемента в этом ArrayState? Спасибо.
  • 0
    просто используйте карту в этом массиве состояний для создания компонентов caja.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню