在 React 组件之间传递数据

React 是一个用于构建用户界面的 JavaScript 库。React 使用可复用的组件。这允许你复用代码、控制组件的更新方式以及它们之间的通信方式。

道具

Props 允许我们在 React 组件之间传递数据。我们可以传递回调函数和其他数据。我们可以为每个组件附加多个 props。传递和访问 props 非常简单。让我们看一些例子。

function Home(){
   return(<div>
      <Greeting/>
   </div>)
}

上面我们有一个函数组件Home，它渲染了第二个函数组件Greeting。目前这只是一个简单的渲染。两个组件之间没有信息传递。

父母与孩子

要理解 props 的工作原理，我们必须首先了解父组件和子组件之间的关系。React 允许传递 props，但只能沿着组件树向下传递。父组件只能将信息传递给子组件。子组件无法将 props 向上传递给父组件。这是 React 的单向数据流。除非你使用像 Redux 这样的独立状态管理器，否则它始终会沿着组件层级向下传递 props。Redux 是另一篇文章的主题。

传递 Props

function Home(){
   return(<div>
      //passing name prop to greeting component
      <Greeting name=‘Tripp’/>
   </div>)
}

function Greeting(props){
   return(<div>
    //using prop passed down
    <p>Hi there {props.name}</p>
   </div>

为了将 prop 传递给组件，我们只需为 prop 命名并将其设置为某个值即可。在上面的示例中，我们传递了一个名为 name 的 prop，它等于一个字符串。传递 prop 使我们能够访问 Greeting 组件中的信息。为了在函数式组件中访问 prop，我们使用props.name. （如果这是一个类组件，我们将使用this.props.name. props.(name of prop being passed)，这将使我们能够像函数参数一样访问 prop。）

回调

请记住，React 是单向数据流。我们只能将 props 从父组件传递给子组件。如果我们在子组件中执行了一些逻辑，并希望它更改父组件中的数据，该怎么办？我们可以通过使用回调函数来实现。Props 不仅允许我们传递数据，还可以将函数作为 prop 传递。当我们在子组件中使用这个回调函数时，它可以执行影响父组件的操作。

function Home(){
   //useState establishes state in a functional component
   let [showSecret, setShowSecret] = useState(0)
   return(<div>
      <Greeting name=‘Tripp’ displaySecrete={setShowSecret}/>
      {/* will show a message once state is true */}
      {showSecret ? <p>Secret: You just went Against the Flow</p> : <p></p>}
   </div>)
}

function Greeting(props){
   return(<div>
      <p>Hi there {props.name}/>
      {/*clicking button will update state of the parent component and show the secret in the parent component */}
      <button onClick={()=> props.displaySecrete(1)>Show Secret</button>
   </div>)
}

概括

• React 具有单向数据流。父组件将 props 向下传递给其子组件。子组件无法将 props 向上传递给其父组件。
• 将回调函数作为 prop 传递，允许子组件在其父组件中进行更改。
• 当道具更新时，它将触发重新渲染。
• 初始化组件时传入 props。<Greeting name=‘Tripp’ />该 prop 名为 name，值为 'Tripp'
• 要访问子组件中的 prop：props.name

希望这篇关于 props 的简短文章对您有所帮助。这些是在组件之间传递数据的简单示例。一旦您掌握了这些，就能快速增强组件之间的数据流，并创建更复杂的应用程序。