React——创建只接受文本作为子道具的组件的最佳方式

Question

I created a React Component that really is just a box with some styling, and the only thing it should accept as props is a block of text. I want this Component (called SuggestionBox) to either accept a single string of text as props.children, or accept no children at all and accept the text as a separate prop field.

I thought about 2 approaches, but was wondering if there was a better way to do this:

1) Pass a prop (called value ), which will be the string of text in SuggestionBox. Use the React.Children API to ensure no children are passed down.

<SuggestionBox value={'some value'} />

const SuggestionBox = ({children, value}) => {
    if (React.Children.count(children) > 0) throw Error()
    ...
    return (...); // Render some html along with "value" prop
}
SuggestionBox.propTypes = {
    value: PropTypes.string
};

Problem is that React.Children.count(children) returns 1 even if I don't pass any children (this is the case in the above example).

2) Use React.Children.only, followed by some type checking

<SuggestionBox> String to be shown </SuggestionBox>

const SuggestionBox = ({children}) => {

    React.Children.only(children);
    if (typeof React.Children.toArray(children)[0] !== String) throw Error();

   ...

Right off the bat, this doesn't really work because React.Children.only(children) expects children to be a react component not a string of text. HOWEVER , that's easy to work around. My real concern is whether this is the approach I should be taking.

EDIT : As per a suggestion by Akber Iqbal, I added a PropTypes declaration to the first code snippet to show that I considered it as part of the solution.

Answer 1

so, use proptypes to ensure that strings are passed and then check for unwanted characters before you assign the values to your state.

relevant JS for propTypes :

import React from "react";
import PropTypes from "prop-types";

const Hello = ({ type, name }) => {
  return (
    <p>
      Got the prop of type:<i>{type}</i> with the value: <b>{name}</b>!
    </p>
  );
};

Hello.defaultProps = {
  name: ""
};

Hello.propTypes = {
  name: PropTypes.string
};

export default Hello;

relevant JS for checking special characters :

const App = () => {
  const [inputStr, setInputStr] = useState("");
  const [inputStrErr, setInputStrErr] = useState("");

  const validateStr = evnt => {
    setInputStr("");
    setInputStrErr("");
    evnt.target.value.search("<") >= 0 || evnt.target.value.search(">") >= 0
      ? setInputStrErr("invalid characters detected")
      : setInputStr(evnt.target.value);
  };

  return (
    <div>
      <input
        type="text"
        onChange={e => {
          validateStr(e);
        }}
      />
      {inputStrErr || inputStrErr.length > 0 ? 
        <p className='errorMessage'>{inputStrErr}</p>
       : (
        <Hello type="string" name={inputStr} />
      )}

      <Hello type="number" name={9} />
      <Hello type="array" name={["string1", "string2"]} />
    </div>
  );
};

working stackblitz here