如何将道具从一个组件传递到另一个组件以及道具验证 - react钩子

Question

嗨，我正在学习道具验证。我有两个功能 app 和 Person 。从人函数我将变量传递到应用程序。变量是（名称，首选，年龄）。我需要按以下

1. 名称应用验证：应该是一个
2. 优先的城市：数组类型
3. 年龄：应该是数字，应大于18且小于60 对于上述变量。

在执行此应用程序时，如果验证失败，我需要传递默认值（名称：“史蒂夫”，preferrediccities：['chennai'，'blr']，年龄：18）。我为上述问题写了逻辑，但是当我尝试根据条件使用三元操作来渲染输出时，我的逻辑无法正常工作。任何人都可以指导我在哪里犯错。提前致谢。

const Person = (props) => {
  return (
    <ul>
      <li>
        {props.strName === props.strName ? (
          props.strName
        ) : (
          <p>{Person.defaultProps.Name}</p>
        )}
      </li>
      <li>{props.num}</li>
      <li> {props.arr}</li>
    </ul>
  );
};

Person.propTypes = {
  strName: PropTypes.string,
  num: PropTypes.number,
  arr: PropTypes.array.isRequired,
};

Person.defaultProps = {
  Name: "Steve",
  preferredCities: ["Chennai", "Bangalore"],
  age: 18,
};
function App() {
  return (
    <div className="App">
      <Person strName={18} num={18} arr={["A", "B"]} />
    </div>
  );
}

Answer 1

我认为您需要将其中一个props.strname更改为propstypes.strname。
尝试此{props.strname === proptypes.strname？ （ ..剩余的代码

，我认为这是通过道具的更好方法。

function App() {
     const strName ="john";
     const num = 18;
     const arr =["A","B"];
  return (
    <div className="App">
      <Person strName={strName} num={num} arr={arr} />
    </div>
  );
 }

Answer 2

尝试这个男人：

const Person = ({ strName, num, arr }) => {
  return (
    <ul>
      <li>
        { strName && typeof strName === "string" ? (
          strName
        ) : (
          <p>{Person.defaultProps.Name}</p>
        )}
      </li>
      <li>{num}</li>
      <li> {arr}</li>
    </ul>
  );
};

Answer 3

默认道具不是在支撑验证失败时被采取的。默认道具是当在其母体组件中调用道具时未传递该道具时的后备值。

字符串和数组验证是用于

数字的用例的正常验证，您可以具有一些自定义验证：

const isCustomNumber = (props, propName, componentName) => {
const regexPattern = /\b(19|[2-5][0-9])\b/;
if (!regex.test(props[propName])) {
return new Error(
  `Invalid prop ${propName} passed to ${componentName}. Expected a number between 18 and 60.`
);
}
};

那么您可以进行验证，例如：

Person.propTypes = {
strName: PropTypes.string,
num: PropTypes.isCustomNumber,
arr: PropTypes.array.isRequired,
};

但是，如果验证失败，则不会指定默认值。这只是编译时类型的检查器。

Answer 4

尝试以下操作：

const Person = ({ strName, num, arr }) => {
  return (
  <div>
        { strName && typeof strName === "string" ? (
          strName
        ) : (
          <p>{Person.defaultProps.Name}</p>
        )}
    </div>
   
  );
};

Answer 5

首先，这是Starname的拼写错误，应该是人组件中的 strname 。

const Person = (props) => {
  if(typeof props.starName !== 'string' || !Array.isArray(props.arr) || typeof props.num !== 'number' || props.num < 18 || props.num > 60 ) return;

  return (
  <ul>
    <li>
      {props.strName === props.strName ? (
        props.strName
      ) : (
        <p>{Person.defaultProps.Name}</p>
      )}
    </li>
    <li>{props.num}</li>
    <li> {props.arr}</li>
  </ul>
  );
};

Answer 6

您可以将道具验证为人组成部分。只需检查道具值并有条件使用该值即可。如果需要，请尝试以下代码。

const Person = ({ strName, num, arr }) => {


const defaultValue = {
    name: "Steve",
    preferredCities: ["Chennai", "Bangalore"],
    age: 18
  };
  return (
    <ul>
      <li>{typeof strName === "string" ? strName : defaultValue.name}</li>
      <li>
        {typeof num === "number" && num > 18 && num < 60
          ? num
          : defaultValue.age}
      </li>
      <li> {Array.isArray(arr) ? arr : defaultValue.preferredCities}</li>
    </ul>
  );
};

export default Person;