Как передать строку в качестве реквизита компоненту React?

Что вы должны делать, так это:

const String = ({someString}) => {
  return (
    <h1>{someString}</h1>
  )
}

Тогда ваша исходная реализация должна работать.

Это присваивает props.someString, где то, что вы делаете, просто называет props как someString.

Когда вы используете

const App = () => {
  const someString = 'abc'
  return (
    <String someString = {someString}/>
  )
}

объект props, переданный вашему компоненту <String />,

{
  someString: 'abc'
}

Похоже, вам нужно добавить фигурные скобки в объявление компонента String вот так.

Попробуй это:

const String = ({someString}) => { //this line needs curly brackets
   return (
      <h1>{someString}</h1>
   )
 }

const App = () => {
const someString = 'abc'
   return (
      <String someString = {someString}/>
   )
 }

export default App;

Без этих скобок вы ссылаетесь на весь объект prop

Чтобы добавить к другим ответам, когда вы делаете <MyComponent arg = {value}/>, это вызовет функцию с именем MyComponent с одним аргументом, который является объектом. Этот объект будет содержать поле с именем arg. Мы можем написать эту функцию следующим образом:

const MyComponent = (props) => {
  // do something with `props.arg`
}

Однако props — это всего лишь условность. Параметр может называться как угодно:

const MyComponent = (foo) => {
  // do something with `foo.arg`
}

Для удобства мы можем использовать синтаксис деструктурирования, чтобы получить arg напрямую:

const MyComponent = ({arg}) => {
  // do something with `arg`
}

Теперь у нас есть только переменная с именем arg, которая содержит значение, которое мы передали.

Родительский компонент.js

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const myString = 'Hello, world!';
  return (
    <ChildComponent myProp = {myString} />
  );
}

export default ParentComponent;

ChildComponent.js

import React from 'react';

function ChildComponent(props) {
  return (
    <div>{props.myProp}</div>
  );
}

export default ChildComponent;

Перемещение моих комментариев в ответ, так как я предпочитаю использовать правильную терминологию для лучшего понимания:

React под капотом передает объект в качестве аргумента дочернему компоненту, состоящему из «реквизита», в дочернем компоненте (функции) вы можете назвать этот (полученный) параметр как угодно, но соглашение об именах заключается в том, чтобы называть его props.

Чтобы вы представили, как это будет работать в ванильном JavaScript (потому что, в конце концов, компоненты React — это функции JavaScript), вот пример без деструктуризации:

const Parent = () => {

// calls Children function
  Children({
    someString: 'abc'
  });
}
const Children = (someString) => {
  console.info('someString as object:', someString)
}
Parent();

В приведенном выше примере вам нужно будет использовать средства доступа к свойствам, такие как запись через точку или запись в квадратных скобках, чтобы получить доступ к значению 'abc' из свойства someString одноименного параметра объекта someString.

Вместо этого ниже приведен пример того, как это будет выглядеть намного проще, если вы используете встроенную деструктуризацию:

const Parent = () => {
  Children({
    someString: 'abc'
  });
}
const Children = ({ someString }) => {
  console.info('someString destructured:', someString)
}
Parent();

Вернемся к вашему примеру: поскольку React не знает, как визуализировать объекты (и выдает ошибки, когда вы пытаетесь это сделать), вы можете понять, почему вы должны использовать либо точечную нотацию, либо встроенную деструктуризацию, если вы предпочитаете простоту:

const String = ({ someString }) => {
  return (
    <h1>{someString}</h1>
  )
}

// ... the rest of your code

И это считывало бы значение 'abc' в JSX вместо того, чтобы пытаться отобразить весь объект.