Запитання з тегом «jsx»

З огляду на простий компонент, який робить його дітей: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Запитання: Яким повинен бути власні тип дітей? Коли я встановлюю його як об'єкт, він не працює, …

265 reactjs  jsx  react-proptypes 

У роботі я щось дуже заплутано React. В Інтернеті є багато прикладів, які використовують .jsфайли з реагуванням, але багато інших використовують .jsxфайли. Я читав про .jsxфайли, і я розумію, що вони просто дозволяють вам писати HTML-теги в межах вашого javascript. Але те ж саме можна записати і у .jsфайли. Тож …

211 reactjs  jsx 

В офіційних документах React це згадується - Якщо ви знайомі з методами життєвого циклу класу React, ви можете подумати про використанняEffect Hook як компонентDidMount, компонентDidUpdate та компонентWillUnmount. Моє запитання - як ми можемо використовувати componentWillMount()метод lifecyle в гачку?

175 javascript  reactjs  jsx  react-hooks 

Я намагаюся написати компонент React. для тегів заголовка html (h1, h2, h3 тощо), де пріоритет заголовка динамічно змінюється на основі пріоритету, визначеного нами в реквізитах. Ось що я намагаюся зробити. <h{this.props.priority}>Hello</h{this.props.priority}> очікуваний вихід: <h1>Hello</h1> Це не працює. Чи можливий спосіб зробити це?

162 reactjs  jsx 

Ось, що я спробував і як це виходить не так. Це працює: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Це не так: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Властивість опису - це лише звичайний рядок вмісту HTML. Однак він відображається як рядок, а не як HTML чомусь. Будь-які пропозиції?

159 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; …

142 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 = (props: …

138 reactjs  typescript  jsx  typescript2.0 

Я запускаю ворсинку зі своїм додатком 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)'}} …

103 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 …

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 

Я працюю над проектом з Typescript, React та Redux (усі працюють в Electron), і я зіткнувся з проблемою, коли включаю один компонент на основі класу до іншого і намагаюся передавати параметри між ними. Вільно кажучи, у мене є така структура для компонента контейнера: class ContainerComponent extends React.Component<any,any> { .. render() …

91 reactjs  typescript  redux  electron  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 

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

85 javascript  react-native  jsx 

У моєму index.js є такий фрагмент class App extends Component { render() { return ( <div style = { styles.app } > Welcome to React! </div> ) } } Код працює, але кожного разу, коли я зберігаю (ctrl + s) Visual Studio форматування jsx так: class App extends Component { …

83 reactjs  visual-studio-code  jsx 

На відміну від webstorm, я не можу коментувати код JSX у .jsфайлах коду Visual Studio.

81 reactjs  react-native  visual-studio-code  jsx