Question

我在app 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')
);

我要做的是将其中所说的部分// Styles Here添加到外部js文件中，并将其添加到它所说的// Component Here部分，以便它们都在外部文件上。

我该怎么做？

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

为0组件创建单独的文件，Nothing，如下所示：

Just maxc

然后像这样导入此文件：

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 } }：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;

Javascript ReactJs将JsCss和Component放在外部文件中

2 个答案: