小编Vam*_*anu的帖子

我是webpack的新手,在尝试设置webpack时遇到的问题很少.

我有以下目录结构:

• 节点模块
• 公共(index.html,index.jsx)
• 组件
• webpack.config.js

在index.html中,我试图包含

<script src="../node_modules/react/dist/react-with-addons.js"></script>

当我试图运行webpack时,dev服务器控制台正在向我展示

http://localhost:8080/node_modules/react/dist/react-with-addons.js not found

以下是我的webpack.config.js文件:

module.exports = {
    //This is the entry point for the webpack
    entry: {
    app: ['./public/index.jsx']
    },
    output: {
    // This is the name of the bundle which is created  when webpack runs
    path: './public',
    filename: 'bundle.js' 
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

我是 flexbox 样式的新手。我在尝试将 flexbox 中的元素与最右角对齐时遇到问题。我编写了以下代码以将图像中的加号与红框的右角对齐，但它没有按预期工作。请帮我解决这个问题。

    <View style={main_container}>
      <ScrollView>
          <TouchableHighlight>
                <View style={container}> 
                    <Image style={imageStyle} source={{uri: this.props.data.picture}} />
                    <Text style={textStyle}> {this.props.data.company} </Text>                  
                    <Text style={iconStyle}> 
                        <Icon name={'plus-circle'} size={20} color={'#003057'} />
                    </Text>
                </View>
            </TouchableHighlight>
      </ScrollView>
      <Footer />
     </View>

     const styles = StyleSheet.create({
        main_container: {
           flex: 1,
           flexDirection: 'column',
           marginTop: 70
         },
         container: {
           flex: 1,
           flexDirection: 'row',
           alignItems: 'center',
           margin: 6,
           backgroundColor: 'red'
         },
         imageStyle: {
           width: 50,
           height: 50
         },
        textStyle: {
           fontSize: 10
        },
        iconStyle: {
           backgroundColor: 'yellow',
           alignSelf: 'flex-end'   //why is …

我正在尝试创建一个具有以下功能的列表.

1. 在悬停时更改listItem的背景颜色.
2. 单击更改listItem的背景颜色.
3. 在点击的元素之间切换背景颜色.[即列表中只有一个元素可以点击属性]

我已经执行了onhover 1和2功能,但我无法实现第3个功能.请帮我解决这个问题.

提前致谢.

/** @jsx React.DOM */

   'use strict'

    var React = require('react')


    var ListItem = React.createClass({

        getInitialState: function() {
            return  {hover_flag: false, click_flag: false}
        },

        hoverEvent: function() {
            this.setState({hover_flag: !this.state.hover_flag})
        },

        clickEvent: function(){
            this.setState({click_flag: true})
        },

        render: function() {
            var liStyle = {
                /* some more class properties */
                background: '#cc181e',
            }

            if(this.state.hover_flag || this.state.click_flag) {
                liStyle['background'] = '#880000'
            }

            if(this.state.click_flag) {
                liStyle['background'] = '#880000'           
            }

            return (
                <li onClick={this.clickEvent} onMouseEnter={this.hoverEvent} onMouseLeave={this.hoverEvent} style={liStyle} key={this.props.name}>{this.props.name}</li>
            ) …