Question

我一直试图进入React并因此阅读官方指南，但是，我不确定如何将组件放入他们自己的文件中以在文件中重复使用它们。

我已经制作了一个非常基本的React组件，它包含input标签和一些配置。我想在自己的文件中将此输入标记作为独立组件。我如何实现这一目标？

我在这个配置中使用Webpack：

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

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

这是React代码：

import React, { Component } from 'react';

export default React.createClass({
  getInitialState: function() {
    return {text: ''};
  },
  handleChange: function(e) {
    this.setState({text: e.target.value})
  },
  render() {
    return (
      <div>
        <h1>What's your name?</h1>
        <input 
            type="text" 
            value={this.state.text} 
            onChange={this.handleChange}
        />
        <h2>Hallo, {this.state.text}</h2>
      </div>
    );
  }
});

编辑：我忘记了index.js：

import React from 'react';
import { render } from 'react-dom';
import App from './Components/App';

render(<App />, document.getElementById('root'));

感谢。

Answer 1

您将需要创建一个输入组件并传递您的状态并将更改函数作为道具处理到组件。

输入组件：

import React, {Component} from 'react';

var Input = React.createClass({
  handleChange: function(e) {
    this.props.handleChange(e.target.value);
  }

  render() {
    return (
      <input
        type="text"
        value={this.props.text}
        onChange={this.handleChange} />
    )
  }
});
export default Input;

您当前的组件（添加了输入组件）：

import React, { Component } from 'react';
import Input from './path_to_inputComponent';

export default React.createClass({
  getInitialState: function() {
    return {text: ''};
  },
  handleChange: function(text) {
    this.setState({text: text})
  },
  render() {
    return (
      <div>
        <h1>What's your name?</h1>
        <Input text={this.state.text} handleChange={this.handleChange} />
        <h2>Hallo, {this.state.text}</h2>
      </div>
    );
  }
});

所以会发生什么，this.state.text将作为文本道具传递给Input，它将设置输入的值。这将允许输入组件在多个位置使用，并且在每个位置使用不同的value。此外，当从输入触发onChange事件时，它将调用作为prop传递给它的handleChange函数的函数。因此，它将调用父组件中的函数，并且将在父组件中更新状态。

反应：使组件外部

1 个答案: