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

Edit: Я забыл 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 будет передан в качестве текстовой опоры для ввода, который будет задано значение входа. Это позволит использовать компонент ввода во многих местах и ​​иметь различное value в каждом месте, где он используется. Кроме того, когда событие onChange запускается с входа, оно вызывает функцию, которая передается ему в качестве опоры функции handleChange. Следовательно, он вызывается функцией в родительском компоненте, и состояние будет обновляться в родительском компоненте.