Questions tagged «jsx»

给定一个呈现其子级的简单组件： class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; 问题：孩子道具的propType应该是什么？ 当我将其设置为对象时，当我将组件与多个子级一起使用时，它将失败： <ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent> 警告：无法道具类型：无效的支柱children型的array 供给ContainerComponent，预计object。 如果将其设置为数组，则如果我只给它一个孩子，它将失败： <ContainerComponent> <div>1</div> </ContainerComponent> 警告：prop类型失败：提供给ContainerComponent的对象类型无效的prop子代，预期数组。 请告知，我是否应该不麻烦对子元素进行propTypes检查？

265 reactjs  jsx  react-proptypes 

在工作时，我感到有些困惑React。 互联网上有很多示例，它们使用.js具有React的文件，但还有许多其他示例使用.jsx文件。 我已阅读过有关.jsx文件的信息，据我了解，它们只是让您在文件中编写html标签javascript。但是同样的事情也可以写在.js文件中。 那么究竟是什么这两个分机之间的实际差异.js和.jsx？

211 reactjs  jsx 

在React的官方文档中，它提到- 如果您熟悉React类的生命周期方法，则可以将useEffect Hook视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。 我的问题是-我们如何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 }} /> description属性只是HTML内容的普通字符串。但是由于某种原因，它呈现为字符串，而不是HTML。 有什么建议？

159 javascript  html  reactjs  jsx 

我四处寻找解决这个问题的方法。所有这些都建议添加"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 

好奇解决此问题的正确方法是： 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: t}); } }); React.renderComponent(<Hello />, …

141 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: LayoutProps) => ( <Aux> <div>Toolbar, SideDrawer, Backdrop</div> <main> …

137 reactjs  typescript  jsx  typescript2.0 

我正在用我的React应用程序运行lint，并且收到此错误： 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)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

我在jsx中使用＆nbsp标记，它没有呈现空间。以下是我的代码的一小段。请帮助。 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> <br/> </div> ); }, });

98 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.，如下图所示： 我的软件包的版本： "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", 这是为什么？

92 reactjs  typescript  events  types  jsx 

我正在使用Typescript，React和Redux（均在Electron中运行）开发一个项目，当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时，我遇到了一个问题。宽松地说，容器组件具有以下结构： class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); 和子组件： interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 显然，我只包含基础知识，这两个类还有很多其他内容，但是当我尝试运行对我来说看起来像是有效代码的代码时，仍然出现错误。我得到的确切错误： …

91 reactjs  typescript  redux  electron  jsx 

我已经设定eslint＆eslint-plugin-react。 当我运行ESLint时，linter会no-unused-vars为每个React组件返回错误。 我假设它没有意识到我正在使用JSX或React语法。有任何想法吗？ 例： app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> {this.props.children} </div> ); } } 短绒错误： /my_project/src/components/app.js 1:8 error 'React' is defined but never used no-unused-vars 2:8 error 'Header' is …

86 javascript  reactjs  jsx  eslint 

我目前正在使用React Native构建一个测试应用程序。到目前为止，图像模块一直运行良好。 例如，如果我有一个名为的图像avatar，则以下代码段可以正常工作。 <Image source={require('image!avatar')} /> 但是但是如果我将其更改为动态字符串，则会得到 <Image source={require('image!' + 'avatar')} /> 我得到错误： 需要未知模块“ image！avatar”。如果您确定模块在那里，请尝试重新启动打包程序。 显然，这是一个人为的示例，但是动态图像名称很重要。React Native是否不支持动态图像名称？

84 javascript  react-native  jsx 

与webstorm不同，我无法.js在Visual Studio Code中的文件中注释掉JSX代码。

79 reactjs  react-native  visual-studio-code  jsx