React Uncaught ReferenceError：未定义变量

Question

我使用一个组件 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（第二次从这里调用组件）

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

您的本意是将TitleWithAddButton 包含在文件AddCarWashPage.jsx 中，您的第二次调用发生在该文件中，但改为包含import Title from './../Title.jsx'。