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

Я хочу зробити свій компонент після того, як мій запит ajax буде виконано. Нижче ви можете побачити мій код var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); Але я отримую помилку нижче, …

83 javascript  ajax  asynchronous  reactjs  jquery-deferred 

У моєму 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 

У мене є форма, в якій я хочу , щоб ручка зміни події на час написання тексту, а React OnChange запуску по ключовим вниз ( в відміну від нативного JS, що спускові змін події , коли поле введення з фокуса ). Чи є спосіб React зробити те, що я хочу?

83 javascript  reactjs 

Я створив нову програму для реагування за допомогою create-react-appcli. Тоді я додав 'react-redux'бібліотеку за допомогою npm install --save react-redux. У package.jsonмене є: "react-redux": "^4.4.5" На жаль, програма не компілюється, і вона скаржиться на: Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 Я не уявляю, що це …

82 reactjs  react-redux 

У більшості випадків наявність батьківського тегу не є проблемою. React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); Але є деякі випадки, коли має сенс мати елементи односемейного зв'язку в одній функції візуалізації без батьківського елемента, і особливо у випадку таблиці, ви не хочете …

82 reactjs 

Дивлячись на цей приклад React Router Dom v4 https://reacttraining.com/react-router/web/example/auth-workflow, я бачу, що компонент PrivateRoute деструктурує такий репер, як цей const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location …

82 reactjs  react-router 

Я розумію, що навчальні посібники та документація React однозначно попереджають, що стан не слід прямо мутувати і що все має пройти setState. Я хотів би зрозуміти, чому, власне, я не можу просто безпосередньо змінити стан, а потім (у тій самій функції) зателефонувати, this.setState({})щоб просто викликати render. Наприклад: Наведений нижче код, …

82 javascript  reactjs 

Я намагаюся це зробити, npm installі з'являється помилка: Failed at the node-sass@4.5.0 postinstall script. Я спробував видалити, node_modulesа потім перевстановити, з'являється та сама помилка. яке буде рішення? вузол v8.9.3 нпм v5.4.2 іонний 3.19.0

82 angular  reactjs  npm  ionic3  node-sass 

Я трохи новачок у React і намагаюся встановити className як string + prop. Але я не впевнений, як це зробити і чи це найкраща практика. Отже, що я намагаюся зробити, і це, очевидно, не працює, це: <a data-featherlight='string' + {this.props.data.imageUrl}> Як би я писав це?

81 reactjs 

Я написав якийсь код для відтворення повторюваних елементів у ReactJS, але ненавиджу, наскільки це потворно. render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> <thead> …

81 javascript  reactjs 

Я реагую на використання angular і намагаюся зрозуміти хорошу альтернативу реакції ng-if директиви angular, де я відображаю або не відображаю елемент на основі умови. Візьмемо для прикладу цей код. Я використовую машинопис (tsx) до речі, але це не повинно мати великого значення. "use strict"; import * as React from 'react'; …

81 reactjs 

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

81 reactjs  react-native  visual-studio-code  jsx 

Спосіб реагування, щоб встановити, який параметр буде обраний для поля вибору, полягає у встановленні спеціального valueопису на самому <select>собі, що відповідає valueатрибуту <option>елемента, який ви хочете вибрати. Для multipleвибору цей проп може замість нього прийняти масив. Тепер, оскільки це спеціальний атрибут, мені цікаво, яким є канонічний спосіб отримати вибрані параметри …

81 javascript  dom  reactjs 

У мене така дія в React: export function fetchPosts() { const request = axios.get(`${WORDPRESS_URL}`); return { type: FETCH_POSTS, payload: request } } Як протестувати Axios у цьому випадку? У Jest на цьому сайті є такий варіант використання асинхронного коду, де вони використовують макетну функцію, але чи можу я це зробити …

81 javascript  reactjs  react-redux  jestjs 

У моєму візуалізації батьків є код нижче <div> { this.state.OSMData.map(function(item, index) { return <Chart key={index} feature={item} ref="charts" /> }) } </div> І код нижче в моїй дитячій таблиці <div className="all-charts"> <ChartistGraph data={chartData} type="Line" options={options} /> </div> Я думав, що батьківський компонентDidMount викликається лише після завантаження всіх дочірніх елементів. Але тут …

81 javascript  reactjs