Javascript 类名称在react js中的按钮标记中不起作用_Javascript_Reactjs_Webpack

Javascript 类名称在react js中的按钮标记中不起作用

javascript reactjs webpack

Javascript 类名称在react js中的按钮标记中不起作用,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我正在尝试使用react js中的className为按钮添加样式。但它不起作用。它显示如下所示的默认样式。有人能帮忙吗这是我的密码 home.js import React from "react"; export class Home extends React.Component{ constructor(props){ super(); this.age=props.age; } onMakeOlder(){

我正在尝试使用react js中的

className

为按钮添加样式。但它不起作用。它显示如下所示的默认样式。有人能帮忙吗

这是我的密码

home.js

import React from "react";

export class Home extends React.Component{
    constructor(props){
        super();
        this.age=props.age;

    }
    onMakeOlder(){
        this.age +=3;
        console.log(this.age);
    }
    render(){

        return (
            <div>
                <p>in a new component!</p>
                <p>your name is {this.props.name} , your age is {this.age}</p>

                <hr/>
                <button onClick={this.onMakeOlder.bind(this)} className="btn btn-primary">Make me older!</button>
            </div>
        );
    }
}

Home.propTypes={
    name: React.PropTypes.string,
    age: React.PropTypes.number
    /*user: React.PropTypes.object*/
};

import React from "react";
import { render } from "react-dom";
import {Header} from "./components/Header";
import {Home} from "./components/Home";

class App extends React.Component {
    render() {
       /* var user={
            name:"Senarath",
            hobbies: ["games","sports"]
        };*/
        return (
         <div className="container">
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
           <Header/>
        </div>
            </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       <Home name={"Pasindu"} age={24}  />



                    </div>
                </div>
            </div>
        );
    }
}
render(<App/>,window.document.getElementById("app"));

var webpack =require("webpack");
var path = require("path");


var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }
};

module.exports = config;

.some-class {
         'color' : red
}

这是我得到的错误

在公用文件夹中编写css文件。并将该css文件链接到index.html文件

public/css/custom.css

import React from "react";

export class Home extends React.Component{
    constructor(props){
        super();
        this.age=props.age;

    }
    onMakeOlder(){
        this.age +=3;
        console.log(this.age);
    }
    render(){

        return (
            <div>
                <p>in a new component!</p>
                <p>your name is {this.props.name} , your age is {this.age}</p>

                <hr/>
                <button onClick={this.onMakeOlder.bind(this)} className="btn btn-primary">Make me older!</button>
            </div>
        );
    }
}

Home.propTypes={
    name: React.PropTypes.string,
    age: React.PropTypes.number
    /*user: React.PropTypes.object*/
};

import React from "react";
import { render } from "react-dom";
import {Header} from "./components/Header";
import {Home} from "./components/Home";

class App extends React.Component {
    render() {
       /* var user={
            name:"Senarath",
            hobbies: ["games","sports"]
        };*/
        return (
         <div className="container">
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
           <Header/>
        </div>
            </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       <Home name={"Pasindu"} age={24}  />



                    </div>
                </div>
            </div>
        );
    }
}
render(<App/>,window.document.getElementById("app"));

var webpack =require("webpack");
var path = require("path");


var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }
};

module.exports = config;

.some-class {
         'color' : red
}

public/index.html

<link href="css/custom.css" rel="stylesheet" type="text/css" />

或

render() {
   const text-color = {
       'color' : 'red'
   }

  return <div style={text-color}></div>
}

render（）{
常量文本颜色={
“颜色”：“红色”
}
返回
}

在公用文件夹中编写css文件。并将该css文件链接到index.html文件

public/css/custom.css

import React from "react";

export class Home extends React.Component{
    constructor(props){
        super();
        this.age=props.age;

    }
    onMakeOlder(){
        this.age +=3;
        console.log(this.age);
    }
    render(){

        return (
            <div>
                <p>in a new component!</p>
                <p>your name is {this.props.name} , your age is {this.age}</p>

                <hr/>
                <button onClick={this.onMakeOlder.bind(this)} className="btn btn-primary">Make me older!</button>
            </div>
        );
    }
}

Home.propTypes={
    name: React.PropTypes.string,
    age: React.PropTypes.number
    /*user: React.PropTypes.object*/
};

import React from "react";
import { render } from "react-dom";
import {Header} from "./components/Header";
import {Home} from "./components/Home";

class App extends React.Component {
    render() {
       /* var user={
            name:"Senarath",
            hobbies: ["games","sports"]
        };*/
        return (
         <div className="container">
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
           <Header/>
        </div>
            </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       <Home name={"Pasindu"} age={24}  />



                    </div>
                </div>
            </div>
        );
    }
}
render(<App/>,window.document.getElementById("app"));

var webpack =require("webpack");
var path = require("path");


var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }
};

module.exports = config;

.some-class {
         'color' : red
}

public/index.html

<link href="css/custom.css" rel="stylesheet" type="text/css" />

或

render() {
   const text-color = {
       'color' : 'red'
   }

  return <div style={text-color}></div>
}

render（）{
常量文本颜色={
“颜色”：“红色”
}
返回
}

看起来您使用的是

bootstrap

。如果您还使用

webpack

和

node\u modules

（此文件夹应位于项目的根目录中），请查看是否存在引导文件夹。如果是，则可以通过以下方式连接：

import React from "react";
import "bootstrap/dist/css/bootstrap.css";

如果此文件夹不存在-则通过命令

npm install bootstrap

安装它，您应该会看到相应的样式

此外，您还应该在

网页的规则部分添加css加载器
配置：
 rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],


编辑：
对于旧版本的网页包，请使用加载程序
关键字：
 module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }

看起来您使用的是bootstrap
。如果您还使用webpack
和node\u modules
（此文件夹应位于项目的根目录中），请查看是否存在引导文件夹。如果是，则可以通过以下方式连接：
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

如果此文件夹不存在-则通过命令npm install bootstrap
安装它，您应该会看到相应的样式
此外，您还应该在网页的规则部分添加css加载器
配置：
 rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],


编辑：
对于旧版本的网页包，请使用加载程序
关键字：
 module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }

通过键入，您可以轻松抓住按钮。ClassName对我也不起作用。
“类型”解决方案非常适合我：
HTML:
通过键入，您可以轻松抓住按钮。ClassName对我也不起作用。
“类型”解决方案非常适合我：
HTML:
你的CSS在哪里？你是怎么设计你的按钮的？我是新来的。我应该在js文件中包含这样的内容吗？可能缺少CSS文件，如果你不想在index.html中使用全局CSS，你可以尝试在文件顶部导入CSS。建议：不要在渲染中直接绑定，而要在构造函数中绑定。我刚刚编辑了这个问题。。react.dom中有CSS吗？CSS在哪里？你是怎么设计你的按钮的？我是新来的。我应该在js文件中包含这样的内容吗？可能缺少CSS文件，如果你不想在index.html中使用全局CSS，你可以尝试在文件顶部导入CSS。建议：不要在渲染中直接绑定，而要在构造函数中绑定。我刚刚编辑了这个问题。。react.dom中有CSS吗？它在编译webpack时给出了一个错误“您可能需要一个合适的加载程序来处理此文件类型。”我刚刚将配置文件添加到问题中。我仍然得到了那个错误更新了答案，这是因为你使用的网页包版本已经被弃用了。你能显示你的webpack.config.js
的修改吗？我们很接近：）它在编译网页包时给出了一个错误“你可能需要一个合适的加载程序来处理这个文件类型。”我只是在问题中添加了配置文件。我仍然得到错误更新的答案，这是因为您使用的网页包版本已经被弃用。您可以显示对webpack.config.js
的修改吗？我们很接近：）我不建议在index.html模板中管理css文件，但是在组件中使用指定的加载和导入css文件我不建议在index.html模板中管理css文件，而是在组件中使用指定的加载和导入css文件