javascript - 加载子组件时在父组件中加载 React Sidebar

Question

在 React 中，我试图在加载特定子组件时在父组件中加载侧边栏组件。我遇到的第一个问题是我不断收到类型错误 this没有定义。其次，无法获取<Sidebar/>在 <NewPage/> 时加载已加载。我还想更新 main 中的标题，但在我能够显示侧边栏之前，我什至无法达到这一点。

下面是我放在一起演示问题的 3 个类的 JSFiddle。

https://jsfiddle.net/pegues/9d31pah7/

主要类组件代码如下:

class Main extends React.Component{

    constructor(props){
        super(props);

        this.titleHandler = this.titleHandler.bind(this);
        this.sidebarHandler = this.sidebarHandler.bind(this);

        this.state = {
            pageTitle: '',
            mounted: false,
            data: [],
            sidebar: false
        }
    }

    // Title Handler
    titleHandler(){
        console.log('Page Title Function Called');
        this.setState({ pageTitle: this.state.pageTitle });
    }

    // Sidebar Handler
    sidebarHandler(){
        console.log('Sidebar Function Called');
        this.setState({ sidebar: !state.sidebar });
    }

    // Load Dashboard
    loadDashboard(){
        ReactDOM.render(<Dashboard/>, document.querySelector('#main-content'));
    }

    // Load New Page
    loadNewPage(){
        ReactDOM.render(<NewPage action={this.sidebarHandler} />, document.querySelector('#main-content'));
    }

    // Render
    render(){
        return(
            <div id="wrapper" className="wrapper">

                <button onClick={this.loadDashboard}>Load Dashboard</button>
                <button onClick={this.loadNewPage}>Load New Page</button>

                {/* Content: Start */}
                <div id="content" className="content">

                    {/* Main: Start */}
                    <div id="main" className="main">

                        <div className="section-title">
                            <h2>{this.state.pageTitle}</h2>
                        </div>

                        {/* Main Content Container: Start */}
                        <div id="main-content" className="main-content container-fluid"></div>
                        {/* Main Content Container: End */}

                    </div>
                    {/* Main: End */}

                    {this.state.sidebar ? <Sidebar/> : null}

                </div>
                {/* Content: End */}

            </div>
        );
    };
}

ReactDOM.render(<Main />,document.querySelector('#root'));

下面是NewPage类组件:

class NewPage extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            pageTitle: 'New Page',
            sidebar: false
        };

        this.props.action.bind(this);
    }

    // Component Will Mount
    componentWillMount(){}

    // Component Did Mount
    componentDidMount(){}

    // Component Will Unmount
    componentWillUnmount(){}

    // Render
    render(){
        return(
            <div>
                New Page Content...
            </div>
        );
    }
}

Answer 1

在类属性中使用箭头函数来避免绑定(bind) this.handleCardClick = this.handleCardClick.bind(this)。

在您的情况下，您忘记了绑定(bind) loadNewPage 等。

class Main extends Component {
  state = {
    pageTitle: "",
    mounted: false,
    data: [],
    sidebar: false
  };

  titleHandler = () => { ... }

  sidebarHandler = () => { ... }

  loadDashboard = () => { ... }

  loadNewPage = ()  => { ... }
...
}

此外，您没有在 sidebarHandler 中引用 state:

sidebarHandler = () => {
    console.log('Sidebar Function Called');
    this.setState({ sidebar: !this.state.sidebar }); // Not state.sidebar
}

你的代码中还有很多错误，比如没有使用传递给 NewPage 的 props.action 等等。

使用带有切换的Dashboard、NewPage 和Sidebar 的当前沙箱来检查您的代码。