Когда Reactjs имеет функциональный компонент как родительский и дочерний компонент как класс

Question

Я новичок в reactjs и учусь на кусочки. Я столкнулся с проблемой. Сценарий похож. У меня есть функциональный компонент в качестве родителя. Он имеет дочерний компонент как компонент класса. Я хотел бы установить или сбросить состояние дочернего компонента по нажатию родительской кнопки. Или есть ли способ вызвать любой метод дочернего компонента из родительского компонента. Я пробовал как

  // this call from a functional component.    
<PhotoPreviewUploaend setSelectedFile={setSelectedFile} ref={setImagePreviewUrl} /> 

Позже после нажатия кнопки это делается: -

setImagePreviewUrl('');

Я читаю атрибут ref, разрешающий доступ к компоненту. Я попробовал этот ref между компонентами класса 2, родительский и дочерний класс компонентов, и он работает, как ожидалось. Но когда сделал то же самое из функционального компонента, это никак не отразилось. Как мне это сделать?

Answer 1

Вы не принимаете одностороннюю реакцию на поток данных, используя подобные ссылки; он может вести себя не так, как вы ожидаете;

Вы должны передать функцию logi c родительского обработчика состояния в дочерний компонент, а затем дочерний компонент вызовет ее с правильным значением; в результате ваше родительское состояние будет обновлено, и вы получите хороший и чистый односторонний поток данных; Вы можете использовать это в любом компоненте, так как вы не связываетесь с this привязками в функциональных компонентах;

Этот пример демонстрирует это в действии:

function App() {
  // Define your state
  const [someState, setSomeState] = useState(0);

  return (
    <div className="container">
       <Child parentCallback={setSomeState} />
    </div>
  );
}

class Child extends Component {

  render(){
    return(
     <div>
        <button
          onClick={() => this.props.parentCallback(/*someValue*/)}
        >
        click me!
        </button>
      </div>
    )
  }
}