标签: react-jsx

我正在将PHPStorm 8.0.3用于我当前的项目,但不幸的是它不支持JSX.在我的React组件(然后由Browserify编译)中,HTML以红色加下划线并且无效:

这只是一个小组件,但对于较大的组件肯定会变得非常烦人.代码格式也无法按预期工作.

1. 是否有(难以找到)设置可以实现正确的语法突出显示？
2. 如果没有这样的设置,是否可以下载相应的包？
3. 如果根本没有支持,我如何扩展PHPStorm(可能通过自定义颜色/语法模式)来接受我的js文件中的HTML？

我如何取一个字符串,并将其转换为jsx？例如,如果我从a引入一个字符串textarea,我怎么能将它转换为一个React元素;

var jsxString = document.getElementById('textarea').value;

我将使用什么过程在客户端上转换它？可能吗？

我正在使用ReactJS + Redux,以及Express和Webpack.有一个API构建,我希望能够从客户端进行REST调用 - GET,POST,PUT,DELETE.

使用Redux架构如何以及正确的方法是什么？就减速器,动作创建器,存储和反应路线而言,任何流程的良好示例都将非常有用.

先感谢您!

我有调度动作的功能.我想在动作之前和之后显示一个加载器.我知道组成传递给的对象的反应setState.问题是如何以异步方式更新属性:

handleChange(input) {
    this.setState({ load: true })
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
}

基本上,如果我将此属性作为应用程序状态的一部分(使用Redux),这一切都很有用,但我真的更喜欢将此属性仅用于组​​件状态.

我正在尝试从数组中获取数据并使用map函数来呈现内容.看着

**{this.lapsList()}** 

和相关的

**lapsList()** 

功能,以了解我正在尝试做什么.结果是什么都没有显示(视图下的视图等)这是我的简化代码:

class StopWatch extends Component {

constructor(props) {
  super(props);

  this.state = {
    laps: []
  };
}

render() {
  return (
    <View style={styles.container}>
        <View style={styles.footer}>
          <View><Text>coucou test</Text></View>
          {this.lapsList()}
        </View>
    </View>
  )
}

lapsList() {

    this.state.laps.map((data) => {
      return (
        <View><Text>{data.time}</Text></View>
      )
    })

}

_handlePressLap() {

  console.log("press lap");

  if (!this.state.isRunning) {

    this.setState({
      laps: []
    })

    return

  }

  let laps = this.state.laps.concat([{'time': this.state.timeElapsed}]);

  this.setState({
      laps: laps
  })

  console.log(laps);

}

}

在.tsx文件中强制转换时,编译器假定它是JSX,例如:

(<HtmlInputElement> event.target).value

给出错误

JSX元素类型'HtmlInputElement'不是JSX元素的构造函数

你如何在.tsx文件中转换TypeScript ？

给出来自React文档的示例代码:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

我做了一些调查...props实际评估的内容,这是:

React.__spread({}, props)

反过来评估为{foo: x, bar: y}.

但我想知道的是,为什么我不能这样做:

var component = <Component props />;

我不明白传播运营商的意义.

在我的其他类中,componentWillReceiveProps运行良好,但由于某种原因,它不会在这里触发.

ItemView.jsx

class ItemView extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: null, 
            rating: null, 
            sector: null, 
            location: null, 
            description: null, 
            image: "blank.png",
            show: false
       };
    }

    ...

    componentWillReceiveProps(nextProps) {

        if(!nextProps.companyToRender) {
            this.setState({
                name: null, 
                rating: null, 
                sector: null, 
                location: null, 
                description: null, 
                image: "blank.png",
                show: false
            });
       }
       else {
           var companyToRender = nextProps.companyToRender;

           this.setState({
               name: companyToRender.name, 
               rating: companyToRender.rating, 
               sector: companyToRender.sector, 
               location: companyToRender.location, 
               description: companyToRender.description, 
               image: companyToRender.image,
               show: true
           });
    }

    ...

    render () {
       return(
        <div> …

我最近在React.js中编写组件.我从来没有使用像componentWillMount和的方法componentDidMount.

render是不可或缺的. getInitialState我写的其他辅助方法也派上用场了.但不是前面提到的两种生命周期方法.

我目前的猜测是它们用于调试？我可以在其中调用console.log:

componentWillMount: function() {
  console.log('component currently mounting');
},

componentDidMount: function() {
  console.log('component has mounted');
} 

还有其他用途吗？

我试图在JSX中使用pre标签.当你在JSX中使用pre标签时,它根本不格式化.为什么？为了使用pre标签,我需要做这样的事情:

const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
  <div dangerouslySetInnerHTML={ preBlock } />;
)

为什么？