React：使组件成为外部的

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 事件时，它将调用作为道具传递给它的 handleChange 函数。因此，它会调用父组件中的函数，并在父组件中更新状态。

React：使组件成为外部的

React: Make components external

javascript

components

reactjs

webpack