Блог

У меня возникли проблемы с использованием history.push("path/...") внутри функционального компонента. Моя проблема заключается в том, что я пытаюсь использовать параметр компонента функции в обработчике кнопок. У меня есть следующий код: Example.js

 ...
import {useHistory} from 'react-router-dom';
...

//This function works fine, but i would prefer something reusable
function Button() {
    const history = useHistory();
    function handle(){
        history.push("/path"); //The path is harcoded
    }
    return(
        <button onClick={handle}>
            Home //This text is harcoded
        </button>
    );
}

//This is what i'm looking for, because i would write it once.
function Button(path, text) {
    const history = useHistory();
    function handle(){
        history.push(path); //This doesn't work
    }
    return(
        <button onClick={handle}>
            {text} //This throws an error "no valid react child"
        </button>
    );
}

//this component is being render as a child of BrowserRouter
class Example extends Component{
    render(){
        return(
            <div>
                <Button path="path/..."/>
            </div>
        );
    }
}

export ...

 

Это мой настоящий код, просто удалены повторяющиеся строки. С первым функциональным компонентом у меня нет проблем, но мне нужно создать новый функциональный компонент для каждой кнопки. Вместо этого я ищу способ написать эту функцию один раз и использовать ее для создания множества кнопок.

Вторая функция ничего не делает, когда путь передается через реквизиты , и если я добавлю console.log(path) handle() значение пути, оно будет напечатано так, как оно передается правильно, но history.push(path) не примет его.

Я хочу добавить, что единственная подсказка, которая у меня есть, — это документы метода push, в которых указаны типы, которые принимает этот метод string , но any которые передаются.

Компоненты React получают только один аргумент, который является объектом props. Вы предполагаете, что их два.

 function Button(path, text) {
  const history = useHistory();
  function handle(){
    history.push(path); // This doesn't work
  }
  return(
    <button onClick={handle}>
      {text} // This throws an error "no valid react child"
    </button>
  );
}
 

должно быть

 function Button({ path, text }) {
  const history = useHistory();
  function handle(){
    history.push(path); // This should work now
  }
  return(
    <button onClick={handle}>
      {text} // This should render now
    </button>
  );
}
 

Обратите внимание, что здесь переданные реквизиты разрушаются из props объекта.

Отправьте путь и имя в качестве реквизита и используйте их внутри функции кнопки.

 <Button path="path/..."/ name="Home">

function Button({path,name}) {
    const history = useHistory();
    function handle(){
        history.push(path); 
    }
    return(
        <button onClick={handle}>
           {name}
        </button>
    );
}