Вопросы с тегом «jsx»

Учитывая простой компонент, который делает его потомки: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Вопрос: Каким должен быть propType детей prop? Когда я устанавливаю его как объект, происходит сбой при использовании компонента …

265 reactjs  jsx  react-proptypes 

Есть кое-что, что я нахожу очень запутанным при работе React. Есть много примеров, доступных в Интернете, которые используют .jsфайлы с реакцией, но многие другие используют .jsxфайлы. Я читал о .jsxфайлах, и я понимаю, что они просто позволяют вам писать HTML-теги в вашем javascript. Но то же самое можно записать и …

212 reactjs  jsx 

В официальных документах React упоминается - Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как о компонентах componentDidMount, componentDidUpdate и componentWillUnmount вместе. Мой вопрос - как мы можем использовать componentWillMount()метод жизненного цикла в крючке?

176 javascript  reactjs  jsx  react-hooks 

Я пытаюсь написать компонент React. для тегов заголовков html (h1, h2, h3 и т. д.), где приоритет заголовка динамически изменяется в зависимости от приоритета, который мы определили в подпорках. Вот что я пытаюсь сделать. <h{this.props.priority}>Hello</h{this.props.priority}> ожидаемый результат: <h1>Hello</h1> Это не работает. Есть ли какой-нибудь возможный способ сделать это?

163 reactjs  jsx 

Вот что я попробовал и как все идет не так. Это работает: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Это не: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Свойство description - это просто обычная строка содержимого HTML. Однако по какой-то причине он отображается как строка, а не как HTML. Какие-либо предложения?

163 javascript  html  reactjs  jsx 

Любопытно, как правильно подойти к этому: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: …

148 javascript  reactjs  jsx 

У меня есть очень простой функциональный компонент: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; И еще один компонент: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout = …

141 reactjs  typescript  jsx  typescript2.0 

Я запускаю lint с моим приложением React и получаю эту ошибку: error JSX props should not use arrow functions react/jsx-no-bind И здесь я запускаю стрелочную функцию (внутри onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> …

105 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

Я использую тег & nbsp в jsx, и он не отображает пространство. Ниже приводится небольшой фрагмент моего кода. Пожалуйста, помогите. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> …

101 html  reactjs  jsx 

У меня есть элемент флажка TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> С помощью VS кода я знаю , что тип входного параметра из this.handleCheckboxClickэто MouseEvent<HTMLInputElement>. Итак, я реализовал это с помощью: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Затем я получаю сообщение об ошибке: [ts] Type 'MouseEvent' is not generic.Как …

92 reactjs  typescript  events  types  jsx 

В настоящее время я создаю тестовое приложение с использованием React Native. Модуль изображения пока работает нормально. Например, если у меня есть изображение с именем avatar, приведенный ниже фрагмент кода работает нормально. <Image source={require('image!avatar')} /> Но если я изменю его на динамическую строку, я получу <Image source={require('image!' + 'avatar')} /> Я …

87 javascript  react-native  jsx 

Я установил eslint& eslint-plugin-react. Когда я запускаю ESLint, линтер возвращает no-unused-varsошибки для каждого компонента React. Я предполагаю, что он не осознает, что я использую синтаксис JSX или React. Любые идеи? Пример: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { …

86 javascript  reactjs  jsx  eslint 

В отличие от webstorm, я не могу комментировать JSX-код в .jsфайлах в Visual Studio Code.

81 reactjs  react-native  visual-studio-code  jsx