TypeError: this.props не является функцией события handleCHange

Question

Я просмотрел здесь ответы на многие вопросы по этому поводу, и я думаю, что делаю все, что должен, но почему-то это не работает.

import React from 'react';
import Switchbookmarks from './switch';

class App extends React.Component {
  test(str){
    console.log(str)
  }
  render(){
  return (
    
    <div className="App">
      <Switchbookmarks>test={this.test.bind(this)}</Switchbookmarks>
    </div>
  );
}
}

export default App;

и переключатель. js файл:

import React, { Component } from 'react'
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

class Switchbookmarks extends Component{
  constructor(props) {
    super(props);
    this.state ={
      checkedA:false
    }
    this.handleChange = this.handleChange.bind(this)
  }
handleChange(event) {
    this.setState({ [event.target.name]: event.target.checked });
    if (event.target.checked) {
      this.props.test(event.target.checked);
    }
  };
  render (){
    return(
    <div style={{marginLeft: '65%', position: 'fixed'}}>
      <FormControlLabel
        control={<Switch checked={this.state.checkedA} onChange={this.handleChange} name="checkedA" />}
        label="Zakładki"
      />
      </div>
    )};
}
export default Switchbookmarks

Я хочу управлять видимостью других родственных компонентов на основе значения переключателя. Когда вызывается handleCHange, он выдает ошибку

TypeError: this.props.test is not a function.

Что я здесь делаю не так или есть какой-нибудь другой способ выполнить sh это?

Answer 1

<Switchbookmarks>test={this.test.bind(this)}</Switchbookmarks>

Видите закрытый >? Это могла быть возможная проблема.

<Switchbookmarks test={this.test.bind(this)}</Switchbookmarks>

Answer 2

Я почти уверен, что вы не сможете связать так, как вы это сделали. Вы должны либо привязать конструкцию и передать реквизиты как this.test, либо просто изменить тестовую функцию на стрелочную функцию, а тестовые реквизиты EDIT: Я даже не думаю, что вам нужно что-то связывать. просто пройти тест как реквизит.

test = (str) => {
    console.log(str)
  }
.....
<Switchbookmarks test={this.test}></Switchbookmarks>