如何在反应的多个功能组件中使用相同的道具答案

【问题标题】：How can I use same prop in multiple functional components in react如何在反应的多个功能组件中使用相同的道具
【发布时间】：2021-09-12 11:11:22
【问题描述】：

这是我的App.jsx：

import React from 'react';
import SoltM from './slot';
const App = ()=>{
  return(
    <>
    <div>
    <SlotM x="emoji1" y="emoji1" z="emoji1" />
    <hr />
    <SlotM x="emoji2" y="emoji3" z="emoji3" />
    <hr />
    <SlotM x="emoji3" y="emoji3" z="emoji3" />
    <hr />
    </div>
    </>
  )
}

export default App;

这是我的SlotM.jsx 组件，在这个组件中，道具不会显示在 True 或 False 组件中。

import React from 'react';
const SlotM = (props) => {
  return ( (props.x === props.y && props.y === props.z) )}
const True = (props) => {
  let { x, y, z } = props
  return (
    <>
      <div className="slot_inner">
        <h1> {x} {y} {z} </h1>
        <h1> This is Matching </h1>
      </div>
    </>
  )
}
const False = (props) => {
  let { x, y, z } = props
  return (
    <>
      <div className="slot_inner">
        <h1> {x} {y} {z} </h1>
        <h1> This is not Matching. emoji1 </h1>
      </div>
    </>
  )
}
export default SlotM;

This is my app.jsx

2:This is SlotM.jsx component in this props are not being displayed in True and False component

【问题讨论】：

你在哪里渲染你的 True 或 False 组件
是的，我检查并解决了谢谢

标签： javascript reactjs react-props react-functional-component

【解决方案1】：

您可以像这样使用扩展运算符：

【讨论】：

【解决方案2】：

我认为你误解了某事。 props.x === props.y && props.y === props.z) ) 返回布尔值，而不是函数。这个怎么样？

const SlotM = (props) => {
    return (props.x === props.y && props.y === props.z) ? <TrueC {...props}/>: <FalseC {...props}/>
} 

const TrueC = (props) => {
    ...

const FalseC = (props) => {
    ...

【讨论】：