Questions tagged «reactjs»

我需要创建一个表单，该表单将根据API的返回值显示某些内容。我正在使用以下代码： class App extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); //error here event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} …

155 reactjs  typescript 

最近发布的React本机功能仅是iOS应用示例和文档。

154 android  reactjs  react-native 

那么这是用reactjs渲染原始html的唯一方法吗？ // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } }); 我知道有一些很酷的方法来用JSX标记内容，但是我主要感兴趣的是能够呈现原始html（包括所有类，内联样式等）。像这样复杂的东西： <!-- http://getbootstrap.com/components/#dropdowns-example --> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" …

154 javascript  reactjs 

我四处寻找解决这个问题的方法。所有这些都建议添加"jsx": "react"到您的tsconfig.json文件中。我已经做了。另一个是添加"include: []"，我也做了。但是，当我尝试编辑.tsx文件时，仍然出现错误。以下是我的tsconfig文件。 { "compilerOptions": { "module": "commonjs", "target": "es5", "allowJs": true, "checkJs": false, "jsx": "react", "outDir": "./build", "rootDir": "./lib", "removeComments": true, "noEmit": true, "pretty": true, "skipLibCheck": true, "strict": true, "moduleResolution": "node", "esModuleInterop": true }, "include": [ "./lib/**/*" ], "exclude": [ "node_modules" ] } 任何的意见都将会有帮助。我正在使用babel 7编译带有env，react和Typescript预设的所有代码。如果你们需要更多文件来帮助调试，请告诉我。

154 reactjs  typescript  jsx  tsx 

我在Prettier 1.7.2和Eslint 1.7.0中使用vscode。在每个换行符之后，我得到： [eslint] Delete 'cr' [prettier/prettier] 这是.eslintrc.json： { "extends": ["airbnb", "plugin:prettier/recommended"], "env": { "jest": true, "browser": true }, "rules": { "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", "no-confusing-arrow": "off", "linebreak-style": "off", "arrow-parens": ["error", "as-needed"], "comma-dangle": [ "error", { "arrays": "always-multiline", "objects": "always-multiline", "imports": "always-multiline", "exports": "always-multiline", "functions": "ignore" } ], "no-plusplus": "off" …

153 reactjs  visual-studio-code  prettier  eslintrc 

class PlayerControls extends React.Component { constructor(props) { super(props) this.state = { loopActive: false, shuffleActive: false, } } render() { var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon" return ( <div className="player-controls"> <FontAwesome className="player-control-icon" name='refresh' onClick={this.onToggleLoop} spin={this.state.loopActive} /> <FontAwesome className={shuffleClassName} name='random' onClick={this.onToggleShuffle} /> </div> ); } onToggleLoop(event) { // "this …

152 javascript  reactjs  this 

我不知道如何使用Typescript为我的组件设置默认属性值。 这是源代码： class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } 当我尝试使用这样的组件时： ReactDOM.render(<PageComponent />, document.getElementById("page")); 我收到一条错误消息，指出foo缺少属性。我想使用默认值。我也尝试过static defaultProps = ...在组件内部使用，但是我怀疑它没有任何作用。 src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type …

151 reactjs  typescript  tsx 

我想问一下最后一句话的意思和作用（导出默认的HelloWorld;），但是我找不到关于它的任何教程。 // hello-world.jsx import React from 'react'; class HelloWorld extends React.Component { render() { return <p>Hello, world!</p>; } } export default HelloWorld;

151 javascript  reactjs 

我正在使用React.JS，当我这样做时react-native run-android（插入设备），我看到一个空白页。当我摇动设备并Debug JS Remotely从选项列表中进行选择时，会看到以下屏幕。 仅供参考： OS: Ubuntu 16.04 Node version is: v4.6.2 java version "1.8.0_111" react": "15.4.1 react-native": "0.38.0

149 android  reactjs  react-native 

这是来自Google Adsense应用程序页面的示例。在主页之前显示的加载屏幕在之后显示。 我不知道如何使用React来做同样的事情，因为如果我使加载屏幕由React组件呈现，它不会在页面加载时显示，因为它必须等待DOM呈现。 更新时间： 我通过将屏幕加载程序放入index.html并在React componentDidMount()生命周期方法中将其删除来举例说明了我的方法。 示例和react-loading-screen。

149 reactjs  asynchronous  redux 

我正在使用create-react-app。我正在尝试从文件夹中的文件中调用公用文件夹中的图片src/components。我收到此错误消息。 ./src/components/website_index.js找不到模块：您试图导入属于项目src /目录之外的../../public/images/logo/WC-BlackonWhite.jpg。不支持src /以外的相对导入。您可以将其移动到src /中，也可以从项目的node_modules /中向其添加符号链接。 import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> 我读过很多东西，说您可以导入路径，但对我来说仍然行不通。任何帮助将不胜感激。我知道有很多这样的问题，但是它们都告诉我要导入徽标或图像，因此很明显我在全局图中缺少某些内容。

149 javascript  reactjs  webpack  create-react-app 

假设我有3个输入：rate，sendAmount和receiveAmount。我把那3个输入放在useEffect diffing params上。规则是： 如果sendAmount更改，我计算 receiveAmount = sendAmount * rate 如果receiveAmount改变了，我计算 sendAmount = receiveAmount / rate 如果费率发生变化，我计算receiveAmount = sendAmount * rate时间sendAmount > 0或计算sendAmount = receiveAmount / rate时间receiveAmount > 0 这是codesandbox https://codesandbox.io/s/pkl6vn7x6j来演示此问题。 有没有一种方法可以比较oldValues和newValues喜欢，componentDidUpdate而不是为此情况制作3个处理程序？ 谢谢 这是我使用https://codesandbox.io/s/30n01w2r06的最终解决方案usePrevious 在这种情况下，我不能使用多个，useEffect因为每次更改都会导致相同的网络呼叫。这就是为什么我也使用changeCount跟踪更改的原因。这changeCount也有助于跟踪仅来自本地的更改，因此我可以防止由于服务器的更改而导致不必要的网络呼叫。

149 reactjs  react-hooks 

React Router允许React应用处理/arbitrary/route。为了使其正常工作，我需要我的服务器在任何匹配的路由上发送React应用程序。 但是webpack开发服务器不能处理任意端点。 这里有一个使用附加快递服务器的解决方案。 如何允许webpack-dev-server允许react-router的入口点 但是我不想启动另一个Express服务器来允许路由匹配。我只想告诉webpack开发服务器匹配任何URL，并向我发送我的react应用。请。

148 reactjs  ecmascript-6  webpack  react-router 

我正在使用JSBin上的ReactJS框架。 我注意到，如果我的组件名称以小写字母开头，那么它将不起作用。 例如，以下内容不呈现： var fml = React.createClass({ render: function () { return <a href='google.com'>Go</a> } }); React.render(<fml />, document.body); 但是，一旦我替换为fml，Fml它就会渲染。 我不能以小写字母开头的标签有原因吗？

148 javascript  reactjs 

我正在尝试使用React钩子解决一个简单的问题 const [personState,setPersonState] = useState({ DefinedObject }); 具有以下依赖性。 "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } 但我仍然收到以下错误： ./src/App.js 第7行： 在函数“ app”中调用React Hook“ useState”，该函数既不是React函数组件也不是定制的React Hook函数react-hooks / rules-of-hooks 第39行： 未定义 “状态” 搜索关键字以了解有关每个错误的更多信息。 组件代码如下： import React, {useState} from 'react'; import './App.css'; import Person from './Person/Person'; const app = props => { const …

148 reactjs  react-hooks