javascript - react : Make components external

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

您需要创建一个输入组件并将您的状态和处理更改功能作为 Prop 传递给该组件。

输入组件:

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 函数。因此，它会调用父组件中的函数，并在父组件中更新状态。