React Uncaught ReferenceError：変数が定義されていません

Question

私は1つのコンポーネントを2回使用します。それは最初の呼び出し時は良いですが、私は2番目の時間（反応ルータを介して別のコンポーネントに移動する）を呼び出すときに私は例外Uncaught ReferenceError: titleStyle is not definedを持っています。コンソールで私はこの行の問題を参照してください：_react2.default.createElement("h2", { style: titleStyle },this.props.title,":") どうしたのですか？

TitleWithAddButton.jsx（問題のある成分）

import React from 'react'; 
import {Link} from 'react-router' 

export default class TitleWithAddButton extends React.Component{ 
render(){ 
    let titleStyle = { 
     width:"50%" 
    }; 

    var button = { 
     width: "10%", 
     float: "right" 
    }; 

    return (
     <div className="title-with-add-button"> 
      <div> 
       <Link to="/carwashAdd"><button type="button" className="btn btn-success" style={button}>Add</button></Link> 
      </div> 
      <h2 style={titleStyle}>{this.props.title}:</h2> 
     </div> 
    ) 
} 
} 

CarWashPage.jsx

import React from 'react'; 
import TitleWithAddButton from './TitleWithAddButton.jsx'; 
import AllCarWashTable from './carwash/AllCarWashTable.jsx' 

export default class CarWashPage extends React.Component{ 

render(){ 
    var carWashPageStyle = { 
     paddingLeft: 10, 
     paddingRight: 10 
    } 

    return (
     <div style={carWashPageStyle}> 
      <TitleWithAddButton title="All carwash"/> 
      <AllCarWashTable/> 
     </div>  
    ) 
} 
} 

AddCarWashPage.jsx（（初めてcomponenは、それからの呼び出しです） 2回目のコンポーネントはここから呼び出します）

import React from 'react'; 
import Title from './../Title.jsx' 

export default class AddCarWashPage extends React.Component{ 

render(){ 
    var addCarWashPage = { 
     paddingLeft: 10, 
     paddingRight: 10 
    } 

    return (
     <div style={addCarWashPage}> 
      <Title title="Add CarWash"/> 
     </div> 
    ) 
} 
} 

Answer 1

あなたは2回目の呼び出しが発生したファイルAddCarWashPage.jsxでTitleWithAddButtonを含むことを意味するが、代わりにimport Title from './../Title.jsx'が含まれています。