Ошибка «Инвариантное нарушение» при добавлении {/ * comment * /} в функцию возврата в реагировать

Question

Я в настоящее время учусь реагировать на нативный и просто выяснил, что при применении следующего кода:

return (
    <View>
        <TextInput
            placeholder="Enter a goal"
        />
        <Button title="ADD" /> {/*This button is cool*/}
    </View>
)

Я получаю следующую ошибку:

Инвариантное нарушение: текстовые строки должен отображаться внутри компонента.

Однако ошибка исчезает, если я не использую самозакрывающийся тег <Button />, а вместо этого размещаю в нем свой комментарий:

<Button>{/* Comment */}</Button>.

Это ошибка или я что-то не так делаю?

Answer 1

Разница в том, что когда вы делаете это

<Button title="ADD" /> {/*This button is cool*/}

, то есть добавляете комментарии после тега jsx, это означает, что он рассматривает комментарий как текстовую строку, а не как комментарий, потому что он находится в той же строке, что и тега, так как это свойство JSX, но в javascript вы могли бы сделать как

var a = 10 // this is variable, <- и это будет считаться комментарием. </p>

, но когда вы делаете, как вы сказали,

<Button>{/* Comment */}</Button>., он рассматривает его как комментарий, заключенный между двумя тегами. И еще одна забавная вещь: если вы разместите свой комментарий чуть выше тега кнопки, он не выдаст ошибку, просто поместите его в другую строку.

 {/*This button is cool*/}
 <Button title="ADD" />