reactjsでコンポーネントを互いに埋め込む方法は？

Question

このコンポーネントに別のコンポーネントをインポートするにはどうすればよいですか？別のファイルを作成してクラスを宣言する必要がありますか？もしそうなら、私はこのスキームにどのようにインポートするのですか？私はbabelとwebpackを使用しています。

具体的には、入力を独自のコンポーネントにし、独自の状態を持ち、MyReactApplicationコンポーネントに渡します。入力ロジックはアプリケーション内の多くの場所で使用されるため、分離する必要があります。

var React = require('react'); 
var ReactDOM = require('react-dom'); 

class MyReactApplication extends React.Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     color: "hotpink" 
    }; 
    } 

    componentDidMount() { 
    this.setState({ 
     color: "steelblue" 
    }); 
    } 

    changeColor(event) { 
    this.setState({ 
     color: event.target.value 
    }); 
    } 

    render() { 
    const styleObj = { 
     backgroundColor: this.state.color 
    }; 

    return(
     <section className="temp" style={styleObj} id="my-user"> 
     <h1>{this.state.color}</h1> 
     <input value={this.state.color} onChange={this.changeColor.bind(this)} /> 
     </section> 
    ); 

    } 
} 

ReactDOM.render(<MyReactApplication name="Mustafa"/>, document.getElementById("app")); 

Answer 1

ファイル番号1：

import React from 'react'; 

export default class Textbox extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <span>my text box</span> 
     ) 
    } 
} 

はファイル番号2は、テキストボックスを使用します。

import React from 'react'; 
import Textbox from './textbox'; 

export default class Textbox extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <div className="texbox-wrapper"> 
       <Textbox /> 
      </div> 
     ) 
    } 
} 

babelは、ファイルをtranspileうとwebpackは、依存関係を確認し、ファイルを一緒にバンドルされます（と正しい構成）。

Answer 2

あなたはそれをインポートする必要があります：import Component from './file'またはvar Component = require('./file');

を次にあなたがあなたが本当にリアクトの基礎を見ている必要があり<Component />

をレンダリングにそれを使用することもできます。 https://facebook.github.io/react/tutorial/tutorial.html

Answer 3

分離してエクスポートしようとしている入力ファイルから新しいコンポーネントを作成する必要があります。次に、import InputComponentName from 'file_path'（es6）またはrequire('file_path')（es5）を<InputComponentName />のように使用します。