Javascript ReactJs Поместите JsCss и компонент во внешние файлы

Question

У меня этот код в файле index.js приложения.

Как вы можете видеть, у него есть некоторые стили, а также компонент кнопки.

Вот полный код:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

//Styles Here 
var buttonStyle1 = { 
    margin: '10px 10px 10px 0', 
    padding: '4px 20px', 
    border: '1px solid grey' 
}; 

var buttonStyle2 = { 
    margin: '10px 10px 10px 0', 
    padding: '4px 10px', 
    border: '1px solid blue', 
    borderRadius: 0 
}; 

//Component Here 
var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     name={this.props.name} 
     className={this.props.className} 
     style={buttonStyle1} 
     onClick={this.handleClick}>{this.props.label} 
     </button> 
    ); 
    }, 
    handleClick: function() { 
    alert('Button pressed name is: '+ this.props.name); 
    } 

}); 

module.exports = Button; 


ReactDOM.render(
    <div> 
    <Button name="button1" label="Button" className="btn btn-success" /> 
    <Button name="button200" label="Label Here" className="btn btn-default" /> 
    <Button name="button20" label="Label again" className="btn btn-default" /> 
    </div>, 
    document.getElementById('root') 
); 

Что я урожденная сделать, это добавить ту часть, где он говорит, // Стили Здесь во внешний JS файл и тот же к той части, где он говорит, что // Компонент Здесь так они находятся на внешних файлах.

Как это сделать?

**//Update:** 

Вот текущий код теперь все в том же уровне, что и index.js

//index.js: 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

import Button from './Buttons'; 


ReactDOM.render(
    <Button style={{fontSize: '14px'}} name='Hi' label='button'/>, 
    document.getElementById('root') 
); 

//ButtonStyles.js 
module.exports = { 
    buttonStyle1 : { 
    margin: '10px 10px 10px 0', 
    padding: '4px 20px', 
    border: '1px solid grey' 
    }; 

    buttonStyle2 : { 
    margin: '10px 10px 10px 0', 
    padding: '4px 10px', 
    border: '1px solid blue', 
    borderRadius: 0 
    }; 
} 

//Buttons.js 

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     name={this.props.name} 
     className={this.props.className} 
     style={this.props.style} 
     onClick={this.handleClick}>{this.props.label} 
     </button> 
    ); 
    }, 
    handleClick: function() { 
    alert('Button pressed name is: '+ this.props.name); 
    } 
}); 

Нет кнопки не показывает

Answer 1

Создать отдельный файл для Button компонента, button.js как это:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     name={this.props.name} 
     className={this.props.className} 
     style={this.props.style} 
     onClick={this.handleClick}>{this.props.label} 
     </button> 
    ); 
    }, 
    handleClick: function() { 
    alert('Button pressed name is: '+ this.props.name); 
    } 

}); 

export default Button; 

И импортировать этот файл туда, куда вы хотите, как это:

import Button from './button' //path to file 

Используйте это так:

<Button /> 

для укладки, создать файл style.js, как это:

module.exports = { 
    buttonStyle1 : { 
    margin: '10px 10px 10px 0', 
    padding: '4px 20px', 
    border: '1px solid grey' 
    }, 

    buttonStyle2 : { 
    margin: '10px 10px 10px 0', 
    padding: '4px 10px', 
    border: '1px solid blue', 
    borderRadius: 0 
    } 
} 

импортируйте этот файл следующим образом:

import Style from './style' // path 

И использовать его как это: <p style={Style.buttonStyle2}></p>

Позвольте мне знать, если вам нужна помощь в этом.

Проверьте jsfiddle: https://jsfiddle.net/jty8rggk/

Answer 2

Создайте файл с именем ButtonStyles.js:

//ButtonStyles.js 
export default { 
    buttonStyle1: { 
     margin: '10px 10px 10px 0', 
     padding: '4px 20px', 
     border: '1px solid grey' 
    }, 
    buttonStyle2: { 
     margin: '10px 10px 10px 0', 
     padding: '4px 10px', 
     border: '1px solid blue', 
     borderRadius: 0 
    }  
} 

После этого вы можете создать файл для компонента под названием Button.js, а затем импортировать и использовать стили в компоненте как показано ниже.

import React from 'react'; 
import styles from './ButtonStyles' 

//Component Here 
var Button = React.createClass({ 
    render: function() { 
    return (
     <button 
     name={this.props.name} 
     className={this.props.className} 
     style={styles.buttonStyle1} 
     onClick={this.handleClick}>{this.props.label} 
     </button> 
    ); 
    }, 
    handleClick: function() { 
    alert('Button pressed name is: '+ this.props.name); 
    } 

}); 

module.exports = Button;