Tag: reactjs

我怎么能使用本机的android和ios使用相同的自定义字体

我使用react native来处理ios和android的相同代码。 现在，在我的项目中，我想为两者使用自定义字体。 我知道如何为ios应用自定义字体但是那些相同的字体如何申请android呢？ //新样本 我在sample / android / app / src / main / assets / fonts / gillsans-italic.ttf下添加了自定义字体我在CustomFontTest组件中应用了这个gillsans-italic.ttf字体，如下所示 var CustomFontTest = React.createClass({ render:function(){ return (CustomFont) } }) var styles = StyleSheet.create({ customFont:{ fontFamily:’gillsans-italic’, fontSize:14, color:’#efefef’ } })

使用Ajax在React中打开天气数据

鉴于Open Weather Map当前的天气数据API ，我试图使用ajax将当前天气数据提取到我的React.js应用程序中，提取给定城市的当前临时值，然后在我的组件中渲染该值。 我正在使用的测试JSON数据位于以下url： http ： //api.openweathermap.org/data/2.5/weather？ id = 5391997＆ units = immerial var CityGrid = React.createClass({ componentDidMount: function() { $.ajax({ url: ‘http://api.openweathermap.org/data/2.5/weather?id=5391997’, // ^^ this should get a variable where id=5391997 is set dataType: ‘json’, success: function(data) { this.setState({temp: data.main.temp}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState:function(){ […]

使用jQuery插件调整表格列的大小

我使用DataTables和jquery-resizable-columns来创建具有可resize的列的表。 这是一个例子 。 我尝试在DataTables的基本ReactJS应用程序中使用jquery-resizable-columns插件。 我在componentDidMount中添加了resizableColumns函数，但它不起作用。 我在ReactJS，任何人都可以向我解释为什么它不起作用？ 的jsfiddle jsx脚本 /** @jsx React.DOM */ var TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ”}; }, render: function() { return ( React + jQuery.DataTable ); } }); var LopMonHoc = React.createClass({ getInitialState: function(){ return {data: []} }, componentDidMount: function(){ var self = this; $(‘#mytable’).DataTable({ “bAutoWidth”: false, […]

如何在View上制作装载机中心

在一个显示该页面页面的视图中，我需要显示加载程序，但加载程序需要在中心显示它。 var LoaderPositionCenter = React.createClass({ render:function(){ return( one one one one one one one one textsds dsdsdsd ) } }) 在First View内容中，我需要将加载器作为中心显示如何使用flexbox //新的一个 var Example = React.createClass({ getInitialState:function(){ return {status:”button”} }, click:function(){ this.setState({status:”buttonText”}); }, render() { return ( { {this.state.status} } one one one one one one one one one one one one one one […]

jquery不适用于jsdom / enzyme

我有一个最小的测试反应应用程序与以下组件： import React from ‘react’; import $ from ‘jquery’; export default class App extends React.Component { componentDidMount() { console.log(‘componentDidMount’, $(‘#helloDiv’).length); } render() { return Hello React! ; } } 这在浏览器（Chrome）中加载时工作正常。 componentDidMount（）中的console.log（）打印出找到的1个helloDiv元素 但是，如果我使用mocha + enzyme + jsdom运行测试，则App组件中的相同console.log（）会输出0： import React from ‘react’; import { mount } from ‘enzyme’; import { expect } from ‘chai’; import App from […]

使用ReactJS的Datatables.net在列中呈现ReactJS组件

我有以下组件与数据表： import React, { Component } from ‘react’ import { Link } from ‘react-router’ import { PanelContainer, Panel, PanelBody, Grid, Row, Col } from ‘@sketchpixy/rubix’ import $ from ‘jquery’ import DataTable from ‘datatables.net’ $.DataTable = DataTable const columns = [{ title: ”, data: ‘check’, }, { title: ‘Foto’, data: ‘avatar’, }, { title: ‘Nombre’, data: […]

React渲染输入的触发器更改事件（类型=范围）

“反应”：“^ 15.4.2” 我无法从jquery触发使用React呈现的输入的更改事件。 我需要做一些端到端的测试。 这是一个沙箱作为一个完整的展示： https ：//codesandbox.io/s/pp1k1kq3om已经加载了jquery。 如果你在控制台中运行：$（’＃reactSlider’）。val（50）.change（），你会注意到没有调用更改处理程序。 在上面的沙箱中还有一个纯html滑块用于比较，一个按预期工作（调用更改函数）。 还试图派出这样的新事件： var event = new Event(‘change’) var target = $(‘#reactSlider’)[0]; target.dispatchEvent(event); 以上也不起作用（并且可以在纯html滑块上工作）。 import React from “react”; import { render } from “react-dom”; const changeHandler = event => { alert(`react slider changed:${event.target.value}`); }; const App = () => ( react-slider run in the console: $(‘#reactSlider’).val(50).change() Notice that […]

当在componentDidmount中使用与jquery的反应时，this.setState（）不是函数

当我使用es6和jquery的ajax函数时，我得到了this.setState() is not a function错误。 我尝试使用this.componentDidmount = this.componentDidmount.bind(this);在构造函数中绑定它this.componentDidmount = this.componentDidmount.bind(this); ，但仍然没有工作。 谁能帮我？ 谢谢！ 这是我的代码： import React from ‘react’; import $ from ‘jquery’; class UserGist extends React.Component { constructor(props) { super(props); this.state = { userName: ”, lastGistUrl: ” }; } componentDidMount() { this.serverRequest = $.get(this.props.source, function(result) { let lastGist = result[0]; this.setState({ userName: lastGist.owner.login, lastGistUrl: lastGist.html_url […]

在React中使用Jquery的正确方法是什么？

我正在尝试使用一个使用大量jQuery的布局/模板的项目。 我已经学会了将模板与ReactJS Project集成，但是，我正在寻找一个可以完全替换jQuery的解决方案。 我的解决方案之一是在React的ComponentDidMount()或Render()函数中使用jQuery函数。 这种方法是否正确？ 这是正确的方法吗？ 我在下面附上了一个小例子： import React, { Component } from ‘react’; import ‘../stylesheets/commonstyles.css’; import ‘../stylesheets/bootstrap-sidebar.css’; import ‘../stylesheets/sidebar1.css’; import $ from ‘jquery’; class NavBar extends Component { constructor(props){ super(props); this.openSidebar = this.openSidebar.bind(this); } openSidebar(){ console.log(‘hello sidebar’); } componentWillMount(){ $(document).ready(function () { $(‘#sidebarCollapse’).on(‘click’, function () { $(‘#sidebar’).toggleClass(‘active’); }); $(‘.search-btn’).on(“click”, function () { $(‘.search’).toggleClass(“search-open”); return […]

如何在单击方法中更改项目的字体重量 – React

我在下面有一个反应代码，我在一系列购物清单中迭代。 我创建了一个状态更改和一个样式变量，它在单击时一次只能更改一个项目。 但它没有用。 出于某种原因，当我点击一个项目时，它会将所有项目都变为粗体。 const App = () => ( ); class GroceryListItem extends React.Component{ constructor(props){ super(props); } render(){ return ( ); } } class GroceryList extends React.Component { constructor(props){ super(props); this.state = { done: false }; } onClickItem(){ this.setState({ done: !this.state.done }); } render(){ var style = { fontWeight: this.state.done ? ‘bold’ : ‘normal’ […]