2017-07-07 1 views
0

を反応させる:タグの不明プロパは、現在、私がしようとすると、反応して、次のコードを実行して学習

「不明な小道具user

var userData = { 
 
\t name: 'Evans D', 
 
\t occupation: ' Logistics Planner', 
 
\t location: 'Birmingham, UK', 
 
\t img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ' 
 
}; 
 

 
class userInfo extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     \t <h1>Name: {this.props.user.name} </h1> 
 
     \t <h2>Occupation: {this.props.user.occupation} </h2> 
 
     \t <h3>Location: {this.props.user.location} </h3> 
 
     \t // <img src={this.props.user.img} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <userInfo user={userData}/>, 
 
    document.getElementById('userInfo') 
 
);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Github Battle</title> 
 
</head> 
 
<body> 
 
<div id='userInfo'></div> 
 
</body> 
 
</html>

コンソールには、次のエラーがスローされます。この小道具を要素から取り外します。 '

私が間違っていることに関するアイデアはありますか?

+0

エラーまたは警告?あなたは完全なメッセージを追加できますか?あなたのコンポーネントのpropTypeを定義できると思います。私にとってもっと邪魔なのは、キャメルケースのクラス名を使用していますが、パスカルケースに入れてください。 – Icepickle

+0

警告:タグに「user」というプロンプトがあります。この小道具を要素から取り外します。 – Evans

+0

本当に警告で、エラーではありません – Icepickle

答えて

1

以下の作業のコードを参照してください。 reactが<userInfo user={userData}/>をレンダリングしようとすると、ネイティブDOMノードuserを非標準DOMアトリビュートuserInfo(これは間違いなく)で使用していると考えられ、警告がスローされます。

2

ユーザーの小道具は私にとってはよかったようです。しかし、私はあなたのスニペットの中で外れている3つのものに気付きます。

  1. JSXを書き込むには、コードスニペットでbabeljs/es2015オプションを使用する必要があります。
  2. 反応ライブラリを使用して使用する必要があります。
  3. コンポーネント名が大文字であることを確認してください。

あなたのコンポーネント名はPascalCaseにする必要があります

var userData = { 
 
\t name: 'Evans D', 
 
\t occupation: ' Logistics Planner', 
 
\t location: 'Birmingham, UK', 
 
\t img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAlfOT5088Z6Bj8_qSsvp3UTlU3ub9H5wG1k6qJareFXS7uqDvsQ' 
 
}; 
 

 
class UserInfo extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     \t <h1>Name: {this.props.user.name} </h1> 
 
     \t <h2>Occupation: {this.props.user.occupation} </h2> 
 
     \t <h3>Location: {this.props.user.location} </h3> 
 
     \t // <img src={this.props.user.img} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <UserInfo user={userData}/>, 
 
    document.getElementById('userInfo') 
 
);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Github Battle</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
</head> 
 
<body> 
 
<div id='userInfo'></div> 
 
</body> 
 
</html>

+0

ありがとうございました。 – Evans

関連する問題