имя класса не работает в теге кнопки в ответ JS

Question

Я пытаюсь добавить стиль к кнопке, используя className в ответ JS.но это не сработало.он показывает стиль по умолчанию, как показано ниже.Кто-нибудь может помочь с этим?

вот мой код.

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*/
};

Отредактировано

здесь находится главная страница.

index.js

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"));

webpack.config.js

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;

вот ошибка, которую я получаю.

Answer 1

похоже, что вы используете bootstrap.если вы также используете webpack и node_modules (эта папка должна находиться в корневом каталоге вашего проекта), то посмотрите, есть ли там папка начальной загрузки.если это так, то вы можете подключить его таким образом:

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

, если этой папки нет - установите его с помощью команды npm install bootstrap, и вы должны увидеть соответствующие стили.

также вы должны добавить css-загрузчик в ваш rules раздел webpack config:

 rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],

https://github.com/webpack-contrib/css-loader

РЕДАКТИРОВАТЬ:

для старых версий веб-пакета используйте ключевое слово loaders:

 module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader'],
            },
        ],
    }

Answer 2

Записать файл css в общую папку.и свяжите этот файл css с файлом index.html.

public / css / custom.css

.some-class {
         'color' : red
}

public / index.html

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

, затем используйте этот вызов CSS в сторону className="some-class"

ИЛИ

Вы можете сделать это напрямую

style = {{'color' : 'red'}}

ИЛИ

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

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