jsx

React: Pass component as prop without using this.props.children

由 社会主义新天地 提交于 2019-12-11 01:47:34
问题 I have this a component Foo.js : // a svg component with a star.svg icon import { IconStar } from 'react-svg-icons'; // call a button with a custom icon <Button icon={ IconStar }> Click to trigger </Button> And then on button.js I have: render() { const theIcon = this.props.icon; return ( <button> {this.props children} {icon() /*this works but i can't pass props inside it*/} <theIcon className={ Styles.buttonIcon } /> </button> ) } I want to render <IconStar> inside <Button> , how do I do

How do I create a typescript definition file (d.ts) for an existing redux connected (jsx)component?

由 喜夏-厌秋 提交于 2019-12-11 01:45:59
问题 I'm adding new components written in TypeScript(tsx) to an existing codebase consisting of vanilla ES6 react components(jsx). When importing the existing jsx-components into a tsx-component I'm adding type defintions for the jsx-components. My issue is how do I add a type definition for a jsx-component that is connected to redux using connect Say I have an existing jsx component: class DateField extends React.Component { ... } function mapStateToProps(state) { return { locale: state

Choosing react component's type at runtime in JSX

由 假如想象 提交于 2019-12-11 00:23:57
问题 I have a react app in which I'd like to choose the type of component at runtime. I'm using ES6 and JSX. Here's my code: import Canvas from '../components/Canvas' import CanvasTextbox from '../components/CanvasTextbox'; .... export default class CenterPane extends React.Component { ... render() { const canvasKids = []; //for (var i = 0; i < 1; i++) { // canvasKids.push(<CanvasTextbox key={i} id={'CanvasTextbox1'} />); //}; for (var i = 0; i < 1; i++) { let kid = this.state.kids[i]; let

Cannot read property 'match' of undefined error

由 二次信任 提交于 2019-12-10 23:48:05
问题 I am trying to display some text in React JS frontend in place of a profile image when it isn't available.Basically, I pass the current customer name to a function which extracts the first characters of all the words in the name. I am able to display just the name but when I do a function call, I get Cannot read property 'match' of undefined" error and the page does not render. Console.log() displays undefined. HTML: <li className="nav-item"> <div id="container_acronym"> <div id="name_acronym

Passing the result of a python script to an ExtendScript `.jsx` file

由 孤街醉人 提交于 2019-12-10 23:04:12
问题 So, I'm writing a python script that gets data from a google sheet and returns it back to an ExtendScript script that I'm writing for After Effects. The relevant bits are : getSpreadsheetData.py def main(): values = getSpreadsheetRange("1M337m3YHCdCDcVyS4fITvAGJsw7rGQ2XGbZaKIdkJPc", "A1:Q41") return processValues(values) afterEffectsScript.jsx var script_file = File("getSpreadsheetData.py"); var results = script_file.execute(); $.writeln(results); alert("done!"); So, I have three questions :

Wrap multiple strings in HTML the React way

由 微笑、不失礼 提交于 2019-12-10 13:54:59
问题 I'm building an entity highlighter so I can upload a text file, view the contents on the screen, then highlight words that are in an array. This is array is populated by the user when they manually highlight a selection e.g... const entities = ['John Smith', 'Apple', 'some other word']; This is my text document that is displayed on the screen. It contains a lot of text, and some of this text needs to be visually highlighted to the user once they manually highlight some text, like the name

Create-React-App build - “Uncaught SyntaxError: Unexpected token <”

由 怎甘沉沦 提交于 2019-12-10 13:03:30
问题 I realize this question has been asked multiple times but nothing has worked for me... I'm trying to create a static build of a create-react-app project but I'm getting the following errors: Uncaught SyntaxError: Unexpected token < 1.ca81c833.chunk.js:1 Uncaught SyntaxError: Unexpected token < main.7ced8661.chunk.js:1 Due to these files being minified, I'm not sure where to begin in debugging them. Per other SO responses, here are some things I've tried: //Original index.html file, which gets

for files outside src directory. Error : You may need an appropriate loader to handle this file type.

由 ﹥＞﹥吖頭↗ 提交于 2019-12-10 12:08:52
问题 I am new to react and I followed this to setup the react environment on my machine. npm install -g create-react-app create-react-app myapp cd myapp npm start So this works completely fine and the app starts perfectly. I created a few test components inside the src file that is created and it works fine too. But the moment I create a directory outside the src file and add my .js files there in which I have my components which were working fine inside src, I get this error. Failed to compile.

Inferred Generic Type on React Component

由 a 夏天 提交于 2019-12-10 11:09:53
问题 Typescript is pretty good about inferred generic types. For example, if I write the following code: class AwesomeClass<T> { constructor(public val: T) { // ... } public getVal(): T { return this.val; } } const inst = new AwesomeClass("Hello World"); const result = inst.getVal(); result is automatically typed to string . Nifty! I'd like to take that a step further with React. If I make the follow component interface IProps<T> { value: T; onClick: (result: T) => void; } interface IState { }

react--jsx

由 情到浓时终转凉″ 提交于 2019-12-10 03:29:35
准备工作 1.保证电脑上有node.js和npm 2.下载yarn，通过npm install -g yarn 下载好之后查看yarn -v 搭建react开发环境 必须安装node.js稳定版本,Node> = 6和npm> = 5.2 创建项目（可创建多次） 找到项目要创建的目录位置 eg E:/react npx create-react-app my-app cd 到项目里运行与生成 cd my-app npm start 运行项目 npm run build 生成项目 JSX–JavaScript XML JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。 你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。 作用：用来创建react虚拟DOM（元素）对象 注意：他不是字符串，也不是HTML/XML标签。他最终产生的就是一个JS对象 function formatName ( user ) { return user . firstName + ' ' + user . lastName ; } const user = { firstName : 'Harper' ,
订阅 jsx