如何导出一个钩子本地变量从另一个文件随着组件在反应?

Question

我想在app.js中使用Aya变量(下面的代码在一个组件中)，但我不能导出它，因为它是函数

的本地变量

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

Answer 1

抬起状态。基本上在App中定义状态，并传递一个处理程序来更新状态，这样它就可以用一个新值调用它。

在这个例子中，我有一个呈现子组件的主组件。在该组件中有一个div，显示来自父状态的count，以及一个增加其值的按钮。请注意，一个函数(处理程序)是在父组件中编写的，然后对它的引用连同值一起传递到子组件的props中。

当按钮被点击时，函数被调用。这会更新导致新呈现的状态，更新后的状态通过更新后的值反映在子组件中。

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>