如何从另一个文件中导出钩子局部变量以及反应中的组件？

Question

i want to use the Aya varriable in app.js (the code below is in a component) but i can't export it as it's local to the function

function BasicExample() {
    const [Aya, setAya] = useState({data});
   // code containing modifications to apply to Aya
}
export default BasicExample

Answer 1

Lift state up . Basically define the state in App and pass a handler that does the update to the state down to your child component so it can call it with a new value.

In this example I have the main component which renders a child component. In that component is a div that displays the count from the parent state, and a button to increment its value. Note that a function (the handler) is written in the parent component, and then a reference to it is passed down into the props of the child component - along with the value.

When the button is clicked the function is called. This updates the state which causes a new render, and the updated state is reflected in the child component by the updated value.

 const { Fragment, useState } = React; function Example() { // Initialise state const [ count, setCount ] = useState(0); // A function called `handleClick` that // updates the state. This handler is passed down // to the child component via its props function handleClick() { setCount(prev => prev + 1); } // The child component accepts both the // `count` state, and the handler as its props return ( <ChildComponent count={count} handleClick={handleClick} /> ); } // We destructure the count and the (reference to the) // function from the component's props. // When the button is clicked it calls the handler. // Changes to the state are reflected here when the parent // component re-renders function ChildComponent({ count, handleClick }) { return ( <Fragment> <div>{count}</div> <button type="button" onClick={handleClick} >Increment count </button> </Fragment> ); } ReactDOM.render( <Example />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>