小编iam*_*ham的帖子

我想在反应js中获取我的Json文件,因为我正在使用它fetch.但它显示错误

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

可能是什么错误,我不知道什么.我甚至验证了我的JSON.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`)
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

我的Json(fr.json)

{
  "greeting1": "(fr)choose an emoticon",
  "addPhoto1": "(fr)add photo",
  "close1": "(fr)close"
}

我有一种情况需要给动态宽度,div所以我需要divStyle = {width: calc(100% - 276px)}在我的React Js代码中使用它.但这样做会给出错误calc is not a function.

我知道这可以使用Jquery实现,但我不想将JQuery引入我的应用程序.如果有任何解决方法或黑客可以解决这个问题,那么请分享.

码:

customFormat = 'hello-div'
divStyle = {width: calc(100% - 276px)}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)

我正在尝试在NPM中发布一个用React创建的组件库.

我不希望它具有外部依赖性,甚至是React模块,以使文件大小最小,并且因为用户将在应用程序中添加此依赖项.

我正在使用npm和webpack管理依赖项.

• 这是我的package.json依赖:

  "devDependencies": {
      "webpack": "^1.13.1",
      "webpack-dev-server": "^1.14.1",
      "webpack-merge": "^0.13.0",
      "babel-core": "^6.9.1",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-react-hmre": "^1.1.1",
      "react": "^15.0.2",
      "react-dom": "^15.0.2"
    },
   "peerDependencies": {
     "react": "^15.0.2",
     "react-dom": "^15.0.2"
   }
  

  Run Code Online (Sandbox Code Playgroud)

• 在我的webpack.config.js文件中,我的入口点为'component.jsx',输出为'lib.js'文件

  // Source code entry
  entry: {
    lib: './src/components/component.jsx'
  },
  
  // Code Output 
  output: {
    path: PATHS.build,
    filename: 'lib.js'
  },
  

  Run Code Online (Sandbox Code Playgroud)

• 我还在反应模块中包含了"externals"属性,以避免webpack包含在'lib.js'输出中.

  externals: {
    'react': 'React',
    'react-dom' : 'ReactDOM'
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 最后,这是我想要发布的简单React组件:

  import React from 'react';
  
  export default class Component …

  Run Code Online (Sandbox Code Playgroud)

我想从我的 React 应用程序中的不同组件打开一个模态，比如说“用户登录的模态”。例如：我希望模态从A.js,B.js和C.js. 因此，我制作了一个ModalWindow.js包含模态的新组件，并将其导入到A.js,B.js和C.js.

现在的问题是我必须showModal: false在所有 3 个组件中维护状态，以便 Modal 显示/隐藏。无论如何，我必须保持一个状态。

一种方法是我在父组件中维护状态。但是有没有更好的办法呢？

X.js

import A from 'A.js'
import B from 'B.js'
import C from 'C.js'

class X extends Component {
  return(
    render{
      <div>
        <A />
        <B />
        <C />
      </div>
    }
  )
}

export default X

A.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }; …

我下载了一个react js Github项目并尝试npm install了这个项目.npm install挂起fetchMetaData -> addTmpTa.我的网络连接很好,尝试在谷歌搜索此问题,但无法找到任何东西.任何帮助将受到高度赞赏.如果你知道addTmpTa安装过程中有什么作用,请在下面做评论.

我遇到需要提交表格的情况。当我使用这种方法1

Method 1

<form action="my_redirect_url" method="post" onSubmit={this.registerEmail.bind(this)}>
   <input
     type="text"
     placeholder='Email address'
     name='EMAIL'
     value={this.state.email}
     onChange={this.handleChangeEmail}
   />
   <button type='submit' />
</form>

然后，表单提交完美，但是我错过了表单验证，即电子邮件验证部分。其有效与否，该表单重定向

Method 2

// onSubmit method
registerEmail = (e) => {
  e.preventDefault();
  let { email } = this.state;
  let emailValidated = validateEmail(email);
  if (emailValidated) {
    fetch('my_redirect_url', {
      method: 'post',
      body : JSON.stringify({
        EMAIL: email
      }),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(ParseJSON) // It parses the output
    .catch(function(error) {
      console.log("error---", error)
    });
  } else {
    alert("invalid email")
  }
} …

当前，在使用时babel-plugin-react-intl，将使用'id'，'description'和'defaultMessage'为每个组件创建单独的json。我需要的是仅创建一个json，其中包含一个对象，其中所有“ id”作为“键”，所有“ defaultMessage”作为“值”

现状：

ComponentA.json

[
  {
    "id": "addEmoticonA",
    "description": "Add emoticon",
    "defaultMessage": "Insert Emoticon"
  },
  {
    "id": "addPhotoA",
    "description": "Add photo",
    "defaultMessage": "Insert photo"
  }
]

ComponentB.json

[
  {
    "id": "addEmoticonB",
    "description": "Add emoji",
    "defaultMessage": "Insert Emoji"
  },
  {
    "id": "addPhotoB",
    "description": "Add picture",
    "defaultMessage": "Insert picture"
  }
]

我需要翻译什么。

final.json

{
  "addEmoticonA": "Insert Emoticon",
  "addPhotoA": "Insert photo",
  "addEmoticonB": "Insert Emoji",
  "addPhotoB": "Insert picture"
}

有什么办法可以完成这项任务？可能是通过使用python脚本或其他任何方式。即从不同的json文件制作一个json文件。或者使用babel-plugin-react-intl直接制作一个json文件

我正在尝试使用 Typescript 来响应 Hello World。我写了下面的代码。这段代码在我使用方法1时有效，但在方法2时抛出错误

Method 1-TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export const TypeScriptComponent = (props: TypeScriptComponentProps) => <Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>;

这段代码可以工作（handleClick 函数有一些意想不到的行为，我可以稍后解决。）

但这个方法行不通

Method 2-TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export default class TypeScriptComponent extends React.Component<TypeScriptComponentProps, {}> {
    render() …

我正在编写一个node.js脚本来组合目录中的所有json文件,并将结果存储为新的json文件.我尝试在很大程度上完成这项工作,但它没有什么缺陷.

A.json

[
  {
    "id": "addEmoticon1",
    "description": "Message to greet the user.",
    "defaultMessage": "Hello, {name}!"
  },
  {
    "id": "addPhoto1",
    "description": "How are youu.",
    "defaultMessage": "How are you??"
  }
]

B.json

[
  {
    "id": "close1",
    "description": "Close it.",
    "defaultMessage": "Close!"
  }
]

我最终需要的是:

result.json

{
  "addEmoticon1": "Hello, {name}!",
  "addPhoto1": "How are you??",
  "close1": "Close!"
}

我写了一个node.js脚本:

var fs = require('fs');

function readFiles(dirname, onFileContent, onError) {
  fs.readdir(dirname, function(err, filenames) {
    if (err) {
      onError(err);
      return;
    }
    filenames.forEach(function(filename) {
      fs.readFile(dirname + filename, 'utf-8', …

我有一个情况,我有3个组件; <View> <Content>和<Footer>.

<View>是<Content>和的父母<Footer>.现在有一个按钮<Footer>,并点击它的时候,我想渲染Overlay的<Content>成分,所以我有机会获得this的的<Content>我的内部组件<Footer>的组件.我没有意识到如何实现这一目标.

View.js

class View extends Component {
  render() {
    return (
      <div>
        <Content messages={this.props.messages}/>
        <Footer />
      </div>
    )
  }
}

Content.js

class Content extends Component {
  render() {
    return (
      <div>
        {this.props.messages}
      </div>
    )
  }

}

Footer.js

class Footer extends Component {
  constructor(props,context){
    super(props,context);
    this.state = {
      showEmojiPicker: false,
    }
  }

  handleToggleEmojiPicker() {
    this.setState({
      showEmojiPicker: !this.state.showEmojiPicker,
    }); …

我正在使用材料ui。我想显示search icon在输入字段中，如图所示

我正在使用这个API

这是我的代码

我可以显示，TextField但不能添加搜索图标。您能添加如何添加吗？

 <TextField id="standard-bare" defaultValue="Bare" margin="normal" />

我在变量 frontendtext 中有一个字符串，其中包含 text 和 img 标签。我希望其中的 img 标签仅使用正则表达式替换为 alt 属性值。

var frontend1 = frontendtext.replace(/<img.*?alt="(.*?)".*>/g, 'O');

它用 替换了我的字符串O，但我只想用 alt 替换 img 标签，而字符串的其余部分保持不变。