从父母到孩子的反应道具

Question

我是第一个有反应的人，我读了文档。这是一个普遍的问题。 我理解如何将子组件中的道具传递给父组件。但是，我不明白如何将父组件中的道具传递给子组件。

所以在图片中，要将道具从列表传递到应用程序，我这样做： 在列表组件中：

interface Props {
   onCreateDoc : () => void
}

在我的app组件中： 我用道具呼叫列表：

<List onCreateDoc={this.onCreateDocCb}/>

我实现了这个功能：

onCreateDocCb = () =>{
// code of function
}

但我不知道如何将道具从app传递到表单。我怎样才能做到这一点 ？谢谢

Answer 1

更容易理解如何传递道具然后如何接收道具。

您可以通过以下方式向表单组件添加道具：

const bar = "bar" const fooBar = () => console.log("fooBar") <Form stringProps="foo" varProps={bar} funcProps={fooBar}/>

在表单组件中，您可以通过this.props.stringProps访问它。 您可以在此处找到示例：https://facebook.github.io/react/docs/components-and-props.html

编辑：这是一个带有应用程序和表单组件的片段，以及从App传递给表单的道具

// Example stateless functional component
const Form = ({ label })  => (
  <div style={{color: "blue"}}>{label}</div>
);

// Example class component
class App extends React.Component {
  render() {
    const {title} = this.props;
    return (
      <div>
        <div>{title}</div>
        <Form label="label from props" />
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App title="title from props" />,
  document.getElementById("react")
);

<div id="react"></div>

<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>