diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 2f2699a813..fa7dfadc11 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -466,7 +466,7 @@ function SearchBar({ filterText, inStockOnly }) { ## 步骤五:添加反向数据流 {/*step-5-add-inverse-data-flow*/} -目前你的应用程序可以带着 props 和 state 随着层级结构进行正确渲染。但是根据用户的输入改变 state,需要通过其它的方式支持数据流:深层结构的表单组件需要在 `FilterableProductTable` 中更新 state。 +目前你的应用程序可以带着 props 和 state 随着层级结构进行渲染。但是如需用户的输入来改变 state,你需要让数据可以反向地传输:深层结构的表单组件需要更新 `FilterableProductTable` 的 state。 React 使数据流显式展示,是与双向数据绑定相比,需要更多的输入。如果你尝试在上述的例子中输入或者勾选复选框,发现 React 忽视了你的输入。这点是有意为之的。通过 ``,已经设置了 `input` 的 `value` 属性,使之恒等于从 `FilterableProductTable` 传递的 `filterText` state。只要 `filterText` state 不设置,(输入框的)输入就不会改变。 diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index c7c9de4eb4..642391edc6 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -1127,7 +1127,7 @@ export default function Board() { } ``` - `handleClick` 函数使用 JavaScript 数组的 `slice()` 方法创建 `squares` 数组(`nextSquares`)的副本。然后,`handleClick` 更新 `nextSquares` 数组,将 `X` 添加到第一个(`[0]` 索引)方块。 + `handleClick` 函数使用 JavaScript 数组的 `slice()` 方法创建 `squares` 数组的副本(`nextSquares`)。然后,`handleClick` 更新 `nextSquares` 数组,将 `X` 添加到第一个(`[0]` 索引)方块。 调用 `setSquares` 函数让 React 知道组件的 state 已经改变。这将触发使用 `squares` state 的组件(`Board`)及其子组件(构成棋盘的 `Square` 组件)的重新渲染。