反応によって遭遇する問題は何ですか?反応問題のまとめ

この記事では主に react のアプリケーションについて説明し、いくつかの問題の原因についてもまとめます。それでは、この記事を一緒に見てみましょう

React プロジェクトで発生した問題:

1. 新しいサブコンポーネントを作成し、親コンポーネントに挿入すると、サブコンポーネントがレンダリングされます。結果は、子コンポーネントの render メソッドの戻り結果ではなく、子コンポーネントにちなんで名付けられた XML タグです。

通常の状況では、 サブコンポーネントによってレンダリングされた結果は、サブコンポーネント内の render メソッドの戻り結果 (p タグ) です。

問題の原因: React コンポーネントの命名規則では、最初の文字は大文字にする必要があります。

React の JSX 構文は、大文字と小文字の規則を使用して、ローカル コンポーネント クラスと HTML タグを区別します。ただし、次の 2 つの点に注意してください。JSX 構文では、HTML タグとコンポーネント タグの class 属性と for 属性は、対応する属性として className と htmlFor を使用する必要があります。

2. Reactで構築されたアプリケーションの場合、input要素とtextarea要素の値を取得し、それらの属性(値)を更新する方法リアルタイムの要素。

HTML ページのような処理を行わない場合は、これら 2 つの要素にデータを書き込み、$(input).val(); または this.refs.input01.value; の 2 つのメソッドを使用します。データを (取得) した場合、結果は空になります。

なぜなら、input要素とtextarea要素要素は目で見ることができますが、react内の要素の属性(値)はリアルタイムに更新されないため、更新する必要がありますinput 要素 と textarea 要素 要素は特別に扱われます。以下の通り:

     <input value={this.state.email} onChange={this.emailChange.bind(this)} type="email" maxLength="20"/>
        emailChange(event){                this.setState({email: event.target.value})        }

onChange イベントを要素にバインドし、event.target.value メソッドを通じて値を取得し、コンポーネントの状態を更新する必要があります。コンポーネントの状態が変化した場合、コンポーネントは再レンダリングされます。そして、 render メソッドを呼び出します。要素は value ={this.state.email}Update の value 属性を渡してデータを取得します。

this.state.email || $(input).val() || this.refs.input.value、データの取得には違いはありませんが、データの書き込みの違い:

非表示のデータを書き込むには、this.refs.input.value="sometext"、または、$(input).val("sometext")、を使用できます。 refs 属性を介して要素を操作するには、render メソッドを呼び出しず、ページを再レンダリングしないでください。 可視データの書き込みは、react:

<input value={this.state.email}/>
    this.setState({email: event.target.value})

3 の state 属性によって制御する必要があります。ページを書いた後、空のページをレンダリングしますが、結果はありません。

問題の原因: コンポーネント内の render メソッドの戻り値のコーディング仕様 (左 p または左括弧) が return キーワードの同じ行に存在する必要があります。 (関連質問: 別の質問で一度エラーが報告されました。公式 Web サイトでは、再実行の戻り値を中括弧 {} で囲まれた変数にすることはできないと説明しています。エンコードの仕様では、最外層は XML タグでなければならず、存在できるのは兄弟 XML タグは存在できません)

4. 親コンポーネントと子コンポーネントの間でパラメーターを渡す

シナリオ 1: 親コンポーネント A が子コンポーネント B にパラメーターを渡す必要がある

子コンポーネント B、19cc6f2a173b5fac770f7e6370d214060d36329ec37a2cc24d42c7229b69747a要素に渡す必要があるパラメータを追加し、同時に属性 this.props.isdisplay を宣言して初期化します。サブコンポーネント B 自体は、多くの props 属性をカプセル化 (公開) しており、親コンポーネント A が B を呼び出すと、データを対応する props 属性に直接渡すことができます。

シナリオ 2:

親コンポーネント A は孫コンポーネント C にパラメーターを渡す必要があり、中間にサブコンポーネント B があり、B はコンポーネント C を呼び出します

        A调用C的时候，需要传入属性isdisplay，此时需要在B组件的props属性中声明并初始化isdisplay属性，同时在B组件调用C组件2b82062a5cae4a6eda1e58c073366b665f6acab10c476fc264ba16ac4aa7415c时，在C组件的属性中传入isdisplay属性。

5、写好一个组件页面，浏览器没有渲染出任何结果，显示空白页面。

    问题原因：react的render方法语法格式错误

        render(){}方法中的return返回内容格式要求，和return同一行必须有内容，并且返回的标签元素最外层只能有一个元素，形如：

return (
<p>...</p>
)
retuern <p>
...
</p>

6、组件的setState方法，传入参数详解，什么时候需要用回调函数？

    this.setStete({},()=>{});//组件状态量，回调函数

    如下情况，由于setStete方法是异步执行，所以直接在setStete方法后取重置的state状态量，有可能取到的是重置之前的值，因此需要用到回调函数，保证了state状态量重置成功后再取值，肯定取到的是重置后的值。（想看更多就到PHP中文网React参考手册栏目中学习）

this.setState({    pageNum: this.state.pageNum + 1});
console.log(pageNum);//pageNum || pageNum + 1

    改造如下：

this.setState({
pageNum: this.state.pageNum + 1
},()=>{
console.log(
pageNum
);
});

    总结：回调函数存在的功能，异步方法执行成功后再执行回调函数内容，即“异步方法同步化”。

7、组件状态量的初始化两种方法：

    ES6语法中，可以在constructor方法中初始化，如下：

constructor(super){
    props(super);
    this.state({
        name: "nickname",
    });
}

    react原生语法如下：

getInitialState() {    return {
        name: "nickname",
    };}

8、react组件的结构与数据和逻辑无关

    选用react框架搭建的web应用，最高效的事情就是，组件可以一次封装，多次调用，也就是说开发的所有组件都是可复用高复用度组件。

    因此，需要理清一个思路，数据与逻辑和组件结构无关，对于具体需求的页面，可以用多个组件拼装而成，每个组件没有具体的数据和逻辑，页面的数据和逻辑在所有组件布局成功之后再添加。

9、对于list页面的路由配置

    场景：比如员工信息列表，每一项对应一个人的详情页面，详情页面的布局完全相同

    这种情况下需要用到react-router的路由参数功能，在路由配置的时候，增加一条参数配置

path: 'employee'//列表页路由配置
path: 'detail/:employeeId'//详情页路由配置，path 属性中的 :employeeId就是该路由的参数params

74a397915334c58c3353e1d4d3c87ca7//列表每项跳转路径
this.props.params.employeeId;//详情页路由具体实现，React Router 将路由的数据都通过 props传递给了页面组件，从而可以访问路由相关数据了。

10、遇到Maximum call stack size exceeded栈溢出问题总结

    案例一：语法逻辑错误

11. コンポーネント状態変数の数の制御: 定義された状態の操作によって得られた値を状態変数として定義できなくなりました

この記事はここで終わります(見たい詳細については、PHP 中国語 Web サイトReact ユーザーマニュアル の欄にアクセスしてください)。ご質問がある場合は、以下にメッセージを残してください。

以上が反応によって遭遇する問題は何ですか?反応問題のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。