Prop

prop

反応器では、属性をpropと呼ぶ.

function Aaa(props) {
    console.log('props', props, props.title);
        return <header>
        <h1><a href='/'>React</a></h1>
        </header>
}
function Nav(props) {
    const lis = []
    for(let i=0; i<props.topics.length; i++){
        let t =props.topics[i]
        lis.push(<li key={t.id}><a href={'/'+t.id}>{t.title}</a></li>)
    }
        return <nav>
            <ol> 
                {lis}
            </ol>
        </nav>
}

function App() {
    return (
        <div>
            <Aaa title="React"></Aaa>
            <Nav topics={topics}> </Nav>
        </div>
    );
}

export default App;

ここから出力propsからconsole.log('props', props);props 는 Objectはオブジェクトであり、titleは「react」値を出力する.
このときreactという単語だけを出力したい場合は、console.log(props.title);と入力するだけです.

        return <header>
        <h1><a href='/'>{props.title}</a></h1>
        </header>

reactという言葉を直接使いたくない場合は、return値に入れたい場合は、上のコードのように{props.title}と入力します.App.js - Nav 부분

function Nav(props) {
    const lis = []
    for(let i=0; i<props.topics.length; i++){
        let t =props.topics[i]
        lis.push(<li key={t.id}><a href={'/'+t.id}>{t.title}</a></li>)
    }
        return <nav>
            <ol> 
                {lis}
            </ol>
        </nav>
}

function App() {
    const topics =[
        { id:1, title:'html', body:'html is ...' },
        { id:2, title:'css', body:'css is ...' },
        { id:3, title:'React', body:'React is ...' },
    ]
    return (
        <div>
            <Nav topics={topics}> </Nav>
        </div>
    );
}

export default App;

Navがリンクを追加したい場合は、function App()変わらない価格でtopicsに渡しました.
前述したように、Nav属性が付与され、lis変数に配列が追加される.(이유는 return 값에 넣기 위함이다. 리액트에 의해서 배열의 값을 하나씩 꺼내서 배치시켜주기 때문에!)

for(let i=0; i<props.topics.length; i++)

이 부분은 Map 함수를 사용해서 쓸 수도 있다 !動的に作成されたタグにはkeyが必要であり、重複文で一意である必要があります.そのため、

lis.push(<li key={t.id}><a href={'/'+t.id}>{t.title}</a></li>)

これのように、キー値を入れました.

なぜkeyを追加するのですか?

簡単に説明すると、自動的に生成されたラベルに対して、反応器はこれらのラベルを追跡すべきであるが、追跡の根拠が必要である.
対応する根拠として、keyという約束の支柱を反応器に与え、反応器の性能を高め、正しい動作をするのを助ける.