React 中的组件设计层次结构

Question

我最近开始学习 React。我想创建两个组件 - Input 和 Display。输入有一个文本框和一个按钮。当我输入内容并提交按钮时，文本字段的值应作为道具传递给 Display，并且 Display 应输出该值。

如何接近设计？什么是组件层次结构？

Answer 1

如果你提供你目前所拥有的，那么回答起来会更容易；否则我只会写整个代码而不是让你学习。

一种方法是实现一个回调函数，该函数在单击输入按钮时使用文本字段的值设置显示中的状态。 Display 应该是将此函数作为 prop 传递给 Input 的那个。当使用文本字段的值单击按钮时，Input 调用此函数。

然后任何正在渲染 Display 状态的东西都会适当地输出值。

Answer 2

您需要 'lift up' 通过它的共享祖先组件将文本输入的值传递给显示道具。

这里有一个 'lifting up' 状态的例子 useState 在功能样式中：

const Input = ({ setValue }) => {
  return <input onChange={(event) => setValue(event.target.value)} />
}

const Display = ({ value }) => {
  return <div>{value}</div>
}

const Parent = () => {
  const [value, setValue] = React.useState('')
  
  return <div>
    <Input setValue={setValue} />
    <Display value={value} />
  </div>
}

ReactDOM.render(<Parent />, document.getElementById('app'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app" />

React 中的组件设计层次结构

Component design hierearchy in React

reactjs

react-component