Question

我正在使用React / Redux开发一个网站，我使用react-router。我想从子页面设置父组件的标题。

const App = ({ title, children }) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

const Page1 = () => (
  <p>Content Page 1</p>
);

const Page2 = () => (
  <p>Content Page 1</p>
);

我看了DocumentTitle，但那不是我想要的。

你有什么想法吗？

谢谢！

Answer 1

您需要将父组件（App）转换为类组件而不是无状态组件，因为title将成为其状态的一部分。然后，您在父级中有一个setTitle函数，该函数作为prop传递给子级。为了向儿童传递额外的道具，我们需要使用React.cloneElement - 我还使用了React.children.map，如果只有一个子组件，则不需要class App extends React.Component { constructor() { super(); this.state = { title: 'Default Title' } this.setTitle = this.setTitle.bind(this); } setTitle(newTitle) { this.setState({ title: newTitle }); } render() { return ( <div> <h1>{this.state.title}</h1> {React.Children.map(this.props.children, child => React.cloneElement(child, { setParentTitle: this.setTitle }) } </div> ); } } const Page1 = ({ setParentTitle }) => { setParentTitle('Page 1'); return ( <p> Content Page 1</p> ); };。

define(['knockout'], function (ko) {

    var auth = function (isAuth, username) {
        this.isAuth = ko.observable(false);
        this.username = ko.observable(username);
    };

    ko.applyBindings(new auth());

});

React.js：从子组件设置父标题

1 个答案: